Skip to main content
Explore
Log in
Get started
Someone wanted to learn this too, so Grasp built them a personal learning path.
Create your own
RxJS for advanced React state
Module 1
Foundations of RxJS and Observables
1
Observables vs. Promises: Core Concepts
Analyze the core Observable contract (producer-consumer, lazy execution, teardown logic) and contrast its behavior with Promises.
Analyze the core Observable contract (producer-consumer, lazy execution, teardown logic) and contrast its behavior with Promises.
2
Cold vs. Hot Observables
Explain the concept of cold vs. hot Observables and their execution semantics.
Explain the concept of cold vs. hot Observables and their execution semantics.
3
Creating Observables from Various Sources
Create Observables from static data, events, and promises using `of`, `from`, and `fromEvent`.
Create Observables from static data, events, and promises using `of`, `from`, and `fromEvent`.
4
Time-Based and Deferred Observables
Generate time-based and deferred Observables using `interval`, `timer`, and `defer`.
Generate time-based and deferred Observables using `interval`, `timer`, and `defer`.
5
Creating Observables from Scratch
Implement a custom Observable using the `Observable` constructor to wrap a non-standard asynchronous source.
Implement a custom Observable using the `Observable` constructor to wrap a non-standard asynchronous source.
Module 2
Core Operators and Stream Transformation
6
Debugging Streams with `tap`
Inspect stream emissions, errors, and completions for debugging using the `tap` operator.
Inspect stream emissions, errors, and completions for debugging using the `tap` operator.
7
Stream Transformation and State Management with `map` and `scan`
Transform stream values using `map` and accumulate state within a stream using `scan`.
Transform stream values using `map` and accumulate state within a stream using `scan`.
8
Filtering RxJS Streams
Filter streams based on value, position, or time using `filter`, `take`, `debounceTime`, and `throttleTime`.
Filter streams based on value, position, or time using `filter`, `take`, `debounceTime`, and `throttleTime`.
9
Filtering Emissions with `distinctUntilChanged` and `sampleTime`
Control emissions based on value changes or stream activity using `distinctUntilChanged` and `sampleTime`.
Control emissions based on value changes or stream activity using `distinctUntilChanged` and `sampleTime`.
10
Combining Streams with RxJS Operators
Combine multiple streams declaratively using `combineLatest`, `merge`, `concat`, and `zip`.
Combine multiple streams declaratively using `combineLatest`, `merge`, `concat`, and `zip`.
11
Parallelize Observables with `forkJoin`
Execute and collect a group of Observables in parallel using `forkJoin`.
Execute and collect a group of Observables in parallel using `forkJoin`.
12
RxJS Flattening Operators: Concurrency Control
Apply and contrast the four primary flattening operators (`mergeMap`, `switchMap`, `concatMap`, `exhaustMap`) to manage async concurrency patterns.
Apply and contrast the four primary flattening operators (`mergeMap`, `switchMap`, `concatMap`, `exhaustMap`) to manage async concurrency patterns.
13
Error Handling and Retry with RxJS
Handle stream errors gracefully using `catchError` and implement retry logic with `retry`.
Handle stream errors gracefully using `catchError` and implement retry logic with `retry`.
Module 3
Subjects and Multicasting
14
Subjects: The Observable Observer
Explain the dual nature of a Subject as both an Observable and an Observer.
Explain the dual nature of a Subject as both an Observable and an Observer.
15
Managing State with BehaviorSubject
Apply `BehaviorSubject` to manage state with an initial value and synchronous access to the current value.
Apply `BehaviorSubject` to manage state with an initial value and synchronous access to the current value.
16
Caching and Replaying Emissions with `ReplaySubject`
Use `ReplaySubject` to cache and replay a history of emissions to late subscribers.
Use `ReplaySubject` to cache and replay a history of emissions to late subscribers.
17
Sharing and Replaying Observables with `shareReplay`
Convert a cold Observable to a hot, shared Observable using the `shareReplay` operator to prevent redundant work.
Convert a cold Observable to a hot, shared Observable using the `shareReplay` operator to prevent redundant work.
18
Subjects vs. shareReplay: Shared Streams
Analyze the differences between Subjects and `shareReplay` for creating shared, multicasted streams.
Analyze the differences between Subjects and `shareReplay` for creating shared, multicasted streams.
Module 4
RxJS in the React Ecosystem
19
Observables and React: Lifecycle Challenges
Explain the challenges of integrating Observables with React's lifecycle, including memory leaks and 'tearing' in concurrent rendering.
Explain the challenges of integrating Observables with React's lifecycle, including memory leaks and 'tearing' in concurrent rendering.
20
Building a Subscription Hook: Common Pitfalls
Implement a basic subscription hook using `useEffect` and `useState` to demonstrate the common pitfalls.
Implement a basic subscription hook using `useEffect` and `useState` to demonstrate the common pitfalls.
21
Building a `useObservable` Hook with `useSyncExternalStore`
Apply the `useSyncExternalStore` hook to create a tear-free, reusable `useObservable` hook for safe component subscriptions.
Apply the `useSyncExternalStore` hook to create a tear-free, reusable `useObservable` hook for safe component subscriptions.
22
Building a Scalable, Type-Safe Event Bus
Refactor a simple Subject-based event bus into a scalable, type-safe solution for cross-component communication.
Refactor a simple Subject-based event bus into a scalable, type-safe solution for cross-component communication.
Module 5
Advanced State Management with RxJS
23
Reactive State with BehaviorSubject
Build a reactive store for centralized application state using a `BehaviorSubject`.
Build a reactive store for centralized application state using a `BehaviorSubject`.
24
Combining States with `combineLatest`
Implement derived state by combining multiple state sources with `combineLatest`.
Implement derived state by combining multiple state sources with `combineLatest`.
25
Reactive Form Validation with Inter-Field Dependencies
Handle complex form validation with inter-field dependencies by combining value streams.
Handle complex form validation with inter-field dependencies by combining value streams.
26
Building a Redux-like Store with RxJS `scan`
Create a Redux-like pattern with action streams and a state reducer function powered by the `scan` operator.
Create a Redux-like pattern with action streams and a state reducer function powered by the `scan` operator.
27
Optimistic Updates with Rollback
Implement optimistic updates with a rollback strategy using `concat`, `tap`, and `catchError`.
Implement optimistic updates with a rollback strategy using `concat`, `tap`, and `catchError`.
28
Implementing Undo/Redo with `buffer` and `scan`
Build undo/redo functionality for state changes using the `buffer` and `scan` operators.
Build undo/redo functionality for state changes using the `buffer` and `scan` operators.
Module 6
Integrating RxJS with Zustand
29
Zustand Fundamentals: State, Actions, and Selectors
Create and manage a basic Zustand store, covering atomic state updates, actions, and selectors.
Create and manage a basic Zustand store, covering atomic state updates, actions, and selectors.
30
Zustand Epics: Bridging Actions and Observables
Implement Zustand middleware to bridge actions with Observable streams for handling async workflows (e.g., an 'epic' pattern).
Implement Zustand middleware to bridge actions with Observable streams for handling async workflows (e.g., an 'epic' pattern).
31
Zustand & RxJS: `switchMap` for Form Submission Side Effects
Apply RxJS `switchMap` within Zustand middleware to handle form submission side effects while using the store for form state.
Apply RxJS `switchMap` within Zustand middleware to handle form submission side effects while using the store for form state.
32
Zustand to RxJS: Combining State and Async Sources
Create derived RxJS streams from Zustand selectors to combine store state with other asynchronous sources.
Create derived RxJS streams from Zustand selectors to combine store state with other asynchronous sources.
33
RxJS for Cross-Store Synchronization
Handle cross-store synchronization and coordination using RxJS operators.
Handle cross-store synchronization and coordination using RxJS operators.
Module 7
Real-World Architectural Patterns
34
Type-Ahead Search with `switchMap`
Implement a type-ahead search feature that cancels previous requests on new input using `switchMap`.
Implement a type-ahead search feature that cancels previous requests on new input using `switchMap`.
35
Building a Resilient WebSocket Observable
Wrap the WebSocket API in a custom Observable that manages its connection lifecycle and message stream.
Wrap the WebSocket API in a custom Observable that manages its connection lifecycle and message stream.
36
Resilient Reconnection with Exponential Backoff
Implement a robust automatic reconnection strategy with exponential backoff for a failing Observable stream (e.g., WebSocket).
Implement a robust automatic reconnection strategy with exponential backoff for a failing Observable stream (e.g., WebSocket).
37
Caching API Requests with `shareReplay`
Build an in-memory cache for API requests with time-based invalidation using `shareReplay`.
Build an in-memory cache for API requests with time-based invalidation using `shareReplay`.
38
Implementing Long-Polling with `expand`
Implement a long-polling mechanism that re-initiates a request only after the previous one completes, using the `expand` operator.
Implement a long-polling mechanism that re-initiates a request only after the previous one completes, using the `expand` operator.
39
Merging Local and Remote Edits
Model a collaborative editing session by merging a local user input stream with a simulated remote update stream.
Model a collaborative editing session by merging a local user input stream with a simulated remote update stream.
40
Advanced RxJS Debugging
Debug complex Observable chains using advanced techniques like custom logging operators and RxJS DevTools.
Debug complex Observable chains using advanced techniques like custom logging operators and RxJS DevTools.