Logo
⚠️ Unsaved
[M]:

RxJS Cheatsheet: Essential Operators and Quick Tips

This notebook provides a quick reference guide to RxJS operators and patterns that you'll commonly use in reactive programming. Whether you're building Angular applications, React with RxJS, or Node.js event-driven systems, this cheatsheet will help you find the right operator for your use case.

We'll cover creation operators, transformation techniques, filtering methods, error handling, multicasting with Subjects, and practical patterns - all with runnable examples.

[1]:
$ npm install rxjs

added 2 packages in 2s

28 packages are looking for funding
  run `npm fund` for details
[2]:
RxJS loaded successfully
[M]:

1. Creation Operators

Creation operators create Observables from various sources.

[3]:
of operator example:
Fruit: apple
Fruit: banana
Fruit: cherry
[4]:
from operator with array:
Number: 1
Number: 2
Number: 3
from operator with promise:
Promise resolved
[5]:
fromEvent example (simulated):
Event received: {"type":"click","x":100,"y":200}
Event received: {"type":"click","x":120,"y":240}
[6]:
map operator example:
Doubled: 2
Doubled: 4
Doubled: 6
Doubled: 8
Doubled: 10
[7]:
range operator example:
Range emitted: 5
Range emitted: 6
Range emitted: 7
iif operator example:
Condition is true
(Random condition was true)
[M]:

2. Transformation Operators

These operators transform emitted values.

[8]:
map operator example:
Doubled: 2
Doubled: 4
Doubled: 6
Doubled: 8
Doubled: 10
[9]:
pluck operator example:
Name: Alice
Name: Bob
Job Title: Developer
Job Title: Designer
[10]:
scan operator example:
Click count: 1
Click count: 2
Click count: 3
[11]:
switchMap example:
Searching for: r
Searching for: re
Searching for: rea
Searching for: reac
Searching for: react
Searching for: redux
Results for "redux"
[12]:
switchMap example:
Searching for: r
Searching for: re
Searching for: rea
Searching for: reac
Searching for: react
Searching for: redux
Results for "redux"
[13]:
exhaustMap example:
Processing click click-1
[14]:
Filtering operators examples:
filter (even numbers):
2
4
6
8
10
take(3):
1
2
3
first(even):
2
last():
10
[M]:

3. Filtering Operators

These operators filter values from the stream.

[15]:
Filtering operators examples:
filter (even numbers):
2
4
6
8
10
take(3):
1
2
3
first(even):
2
last():
10
[16]:
Combination operators:
merge operator: (interleaves both streams)
A
B
C
X
Y
Z
concat operator: (stream1 then stream2)
A
B
C
X
Y
Z

User typing with repeats: "aabbc"
Throttled input: a
Distinct input: a
Distinct input: aa
Distinct input: aab
Throttled input: aabb
Distinct input: aabb
Distinct input: aabbc
Debounced input: aabbc
[M]:

4. Combination Operators

These operators combine multiple Observables.

[17]:
Combination operators:
merge operator: (interleaves both streams)
A
B
C
X
Y
Z
concat operator: (stream1 then stream2)
A
B
C
X
Y
Z
[18]:
Combining latest values from streams:
combineLatest example:
zip example:
Combined: red circle
Zipped: red circle
Combined: green circle
Combined: green square
Zipped: green square
Combined: blue square
[19]:
forkJoin for parallel API calls:
Loading user profile data...
User preferences loaded
User data loaded
User posts loaded
All data loaded, ready to display profile:
{
  "user": {
    "id": 1,
    "name": "John Doe"
  },
  "posts": [
    {
      "id": 1,
      "title": "Post 1"
    },
    {
      "id": 2,
      "title": "Post 2"
    }
  ],
  "preferences": {
    "theme": "dark",
    "notificationsEnabled": true
  }
}
[M]:

5. Error Handling

These operators help with handling errors in reactive streams.

[20]:
catchError example (success case):
Received: API data
catchError example (error case):
Caught error: API request failed
Received: Fallback data
[21]:
retry and retryWhen examples:
Simple retry (3 attempts):
API attempt 1
API attempt 2
API attempt 3
API data successfully retrieved
[22]:
Basic Subject example:
Emitting values to subject:
Subscriber 1 received: First value
Subscriber 2 received: First value
Subscriber 1 received: Second value
Subscriber 2 received: Second value
API attempt 3
Retrying after 800ms (attempt 3)
API attempt 4
API data with backoff retry success
[M]:

6. Subjects and Multicasting

Subjects are both Observables and Observers, useful for multicasting.

[23]:
Basic Subject example:
Emitting values to subject:
Subscriber 1 received: First value
Subscriber 2 received: First value
Subscriber 1 received: Second value
Subscriber 2 received: Second value
[24]:
BehaviorSubject example:
First subscriber: Initial value
First subscriber: Updated value
Second subscriber: Updated value
Current value: Updated value
[25]:
ReplaySubject example:
New subscriber will get last 2 values:
Replayed: Second value
Replayed: Third value
Replayed: Fourth value
[26]:
AsyncSubject example:
Completing AsyncSubject...
First subscriber: Final value - will be emitted
Second subscriber: Final value - will be emitted
Late subscriber: Final value - will be emitted
[27]:
HTTP request caching pattern:
First request to /api/data - should be a cache miss:
❓ Cache miss for /api/data
🌐 HTTP GET: /api/data

With share() - only one execution:
Shared Observable execution: 0
Shared Observer 1: 0
Shared Observer 2: 0
💾 Cached response for /api/data
📄 Response from /api/data

Second request to /api/data after 1s - should be a cache hit:
🏎️ Cache hit for /api/data (age: 0ms)
📄 Response from /api/data
Shared Observable execution: 1
Shared Observer 1: 1
Shared Observer 2: 1
Shared Observable execution: 2
Shared Observer 1: 2
Shared Observer 2: 2

Third request to /api/data after 3s - should be a cache miss (expired):
⏱️ Cache expired for /api/data (age: 2010ms)
🌐 HTTP GET: /api/data
[M]:

7. Practical Patterns

Common patterns you'll use in reactive applications.

[28]:
Typeahead search pattern:
User typed: r
Source Observable execution: 1
Observer 1: 1
Source Observable execution: 1
Observer 2: 1
User typed: re
User typed: rea
User typed: reac
Source Observable execution: 2
Observer 1: 2
Source Observable execution: 2
Observer 2: 2
User typed: react
🔍 Searching API for: "react"
📋 Results for "react"
Typeahead demo completed
[29]:
HTTP request caching pattern:
First request to /api/data - should be a cache miss:
❓ Cache miss for /api/data
🌐 HTTP GET: /api/data

With share() - only one execution:
Shared Observable execution: 0
Shared Observer 1: 0
Shared Observer 2: 0
💾 Cached response for /api/data
📄 Response from /api/data

Second request to /api/data after 1s - should be a cache hit:
🏎️ Cache hit for /api/data (age: 0ms)
📄 Response from /api/data
Shared Observable execution: 1
Shared Observer 1: 1
Shared Observer 2: 1
Shared Observable execution: 2
Shared Observer 1: 2
Shared Observer 2: 2

Third request to /api/data after 3s - should be a cache miss (expired):
⏱️ Cache expired for /api/data (age: 2010ms)
🌐 HTTP GET: /api/data
💾 Cached response for /api/data
📄 Response from /api/data
[30]:
Rate limiting pattern:
Creating rate limiter with max 2 concurrent operations:
Submitting 6 items rapidly:
⚙️ Processing item 1...
⚙️ Processing item 2...
✅ Processed item 1
⚙️ Processing item 3...
✅ Processed item 2
⚙️ Processing item 4...
✅ Processed item 3
⚙️ Processing item 5...
✅ Processed item 4
⚙️ Processing item 6...
✅ Processed item 5
✅ Processed item 6
[M]:

8. Quick Tips and Best Practices

  1. Always unsubscribe from long-lived Observables to prevent memory leaks:

    const subscription = observable.subscribe(...);
// Later when done
subscription.unsubscribe();

  2. Use takeUntil for declarative unsubscription:

    const destroy$ = new Subject();
observable.pipe(
  takeUntil(destroy$)
).subscribe(...);
// When done
destroy$.next();
destroy$.complete();

  3. Choose the right flattening operator:

    • switchMap: Cancel previous and switch to new (search, latest value)
    • mergeMap: Process all in parallel (independent operations)
    • concatMap: Process in sequence (order matters)
    • exhaustMap: Ignore new until current completes (prevent duplicates)

  4. Avoid nested subscribes - use flattening operators instead:

    // BAD
observable1.subscribe(value1 => {
  observable2.subscribe(value2 => { /* ... */ });
});

// GOOD
observable1.pipe(
  switchMap(value1 => observable2)
).subscribe(value2 => { /* ... */ });

  5. Use share() or shareReplay() for multicasting:

    const shared$ = observable.pipe(share());
const cached$ = observable.pipe(shareReplay({bufferSize: 1, refCount: true}));

  6. Handle errors properly to prevent breaking your stream:

    observable.pipe(
  catchError(err => {
    console.error('Error caught:', err);
    return of(fallbackValue); // Return fallback Observable
  })
)

  7. Use finalize() for cleanup operations:

    observable.pipe(
  finalize(() => console.log('Done - cleaning up resources'))
)

  8. Implement cancellation for long operations with takeUntil:

    const cancel$ = new Subject();

longOperation$.pipe(
  takeUntil(cancel$)
).subscribe(...);

// Call this to cancel
cancel$.next();

  9. Use BehaviorSubject for state management:

    const state$ = new BehaviorSubject(initialState);

// Update state
state$.next({...state$.getValue(), property: newValue});

// React to state changes
state$.subscribe(state => updateUI(state));

  10. Prefer pipeable operators over prototype operators for better tree-shaking

[M]:

Summary

RxJS provides powerful tools for handling asynchronous operations in a functional, reactive way. This cheatsheet covered:

  • Creation operators for starting Observable streams
  • Transformation operators to map, merge, and process data
  • Filtering operators to select what data passes through
  • Combination operators to work with multiple streams
  • Error handling techniques for resilient streams
  • Subjects for multicasting to multiple subscribers
  • Practical patterns for common application scenarios

RxJS has a learning curve, mastering these core operators and patterns will help you create more maintainable, declarative, and robust asynchronous code.

Sign in to save your work and access it from anywhere