switchMap for flattening in Angular - Performance & Optimization

Performance: switchMap for flattening

MEDIUM IMPACT

This affects how asynchronous streams are handled, impacting interaction responsiveness and CPU usage during observable flattening.

Handling multiple rapid user input events that trigger asynchronous requests

Angular

this.input$.pipe(
  switchMap(value => this.apiCall(value))
).subscribe(result => this.handleResult(result));

switchMap cancels previous requests when a new input arrives, reducing unnecessary work and improving responsiveness.

📈 Performance Gainreduces concurrent requests to one, lowering CPU and network load, improving INP

Handling multiple rapid user input events that trigger asynchronous requests

Angular

this.input$.pipe(
  mergeMap(value => this.apiCall(value))
).subscribe(result => this.handleResult(result));

mergeMap processes all requests concurrently, causing unnecessary network and CPU load if inputs happen quickly.

📉 Performance Costtriggers multiple concurrent network requests and CPU usage, increasing INP due to overloaded event handling

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
mergeMap with rapid inputs	N/A	N/A	High CPU and network usage	[X] Bad
switchMap with rapid inputs	N/A	N/A	Minimal CPU and network usage	[OK] Good

Rendering Pipeline

switchMap affects the JavaScript execution phase by managing observable subscriptions and cancellations, reducing unnecessary asynchronous operations.

→JavaScript Execution

→Network Requests

→Event Handling

⚠️ BottleneckExcessive concurrent asynchronous operations causing CPU and network congestion

Core Web Vital Affected

INP

This affects how asynchronous streams are handled, impacting interaction responsiveness and CPU usage during observable flattening.

Optimization Tips

1Use switchMap to cancel previous async operations when new data arrives.

2Avoid mergeMap for rapid events to prevent multiple concurrent requests.

3Reducing concurrent async work improves interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance benefit of using switchMap over mergeMap for rapid user inputs?

A It cancels previous requests to reduce CPU and network load

B It queues all requests to run one after another

C It duplicates requests to improve reliability

D It delays requests to reduce network usage

DevTools: Performance

How to check: Record a performance profile while triggering rapid input events; look for overlapping network requests and long scripting tasks.

What to look for: Multiple concurrent network requests and long JavaScript execution blocks indicate poor use of flattening operators; a single active request with quick cancellation shows good use of switchMap.

Practice

1. What is the main purpose of switchMap in Angular RxJS?

easy

A. To combine multiple observables into one without canceling

B. To switch to the latest inner observable and cancel previous ones

C. To delay the emission of values by a fixed time

D. To filter values based on a condition

Solution

1. Step 1: Understand the behavior of switchMap

   switchMap listens to an outer observable and switches to a new inner observable each time the outer emits, canceling the previous inner observable.

2. Step 2: Compare with other operators

   Unlike operators that combine or delay, switchMap cancels previous inner observables to avoid outdated data.

3. Final Answer:

   To switch to the latest inner observable and cancel previous ones -> Option B

4. Quick Check:

   switchMap = switch to latest and cancel old [OK]

Hint: Remember: switchMap cancels old streams, keeps newest only [OK]

Common Mistakes:

• Confusing switchMap with mergeMap which merges all observables
• Thinking switchMap delays values instead of switching
• Assuming switchMap filters values directly

2. Which of the following is the correct syntax to use switchMap in an Angular service?

easy

A. observable$.pipe(switchMap(value => http.get(url)))

B. observable$.switchMap(value => http.get(url))

C. switchMap(observable$, value => http.get(url))

D. observable$.map(switchMap(value => http.get(url)))

Solution

1. Step 1: Recall RxJS pipe syntax

   In Angular, operators like switchMap are used inside the pipe() method on observables.

2. Step 2: Check each option

   observable$.pipe(switchMap(value => http.get(url))) correctly uses observable$.pipe(switchMap(...)). observable$.switchMap(value => http.get(url)) is invalid because switchMap is not a method on observable directly. switchMap(observable$, value => http.get(url)) has wrong argument order. observable$.map(switchMap(value => http.get(url))) misuses map.

3. Final Answer:

   observable$.pipe(switchMap(value => http.get(url))) -> Option A

4. Quick Check:

   Use pipe() with switchMap inside [OK]

Hint: Use pipe() to chain switchMap, not direct method call [OK]

Common Mistakes:

• Calling switchMap directly on observable without pipe
• Mixing switchMap with map incorrectly
• Passing wrong arguments to switchMap

3. Given the code below, what will be logged to the console?

const source$ = of('A', 'B', 'C');
source$.pipe(
  switchMap(letter => of(letter + '1', letter + '2'))
).subscribe(console.log);

medium

A. "C1" and "C2" only

B. ["A1", "A2", "B1", "B2", "C1", "C2"]

C. "A1" and "A2" only

D. Error: switchMap requires an observable

Solution

1. Step 1: Understand source observable emissions

   The source$ emits 'A', then 'B', then 'C' synchronously.

2. Step 2: Apply switchMap to each emission

   For each letter, switchMap maps to an observable emitting letter+'1' and letter+'2'. Since source$ emits synchronously, switchMap cancels previous inner observables when a new outer emission occurs, so only the last inner observable's values "C1" and "C2" are emitted.

3. Step 3: Resulting output

   Only "C1" and "C2" are logged to the console.

4. Final Answer:

   "C1" and "C2" only -> Option A

5. Quick Check:

   switchMap cancels previous inner observables, so only last inner observable outputs [OK]

Hint: switchMap cancels previous inner observables, outputs only latest inner values [OK]

Common Mistakes:

• Thinking switchMap flattens all inner observables in order
• Expecting all inner observable outputs
• Confusing switchMap with mergeMap behavior

4. Identify the error in this Angular RxJS code using switchMap:

this.searchTerm$.switchMap(term => this.http.get(`/api/search?q=${term}`))
  .subscribe(results => this.results = results);

medium

A. subscribe callback syntax is incorrect

B. http.get should be replaced with http.post

C. switchMap is used without pipe()

D. searchTerm$ should be a Subject, not Observable

Solution

1. Step 1: Check usage of switchMap

   In Angular RxJS, operators like switchMap must be used inside the pipe() method, not called directly on the observable.

2. Step 2: Verify other parts

   http.get usage is valid for GET requests. subscribe callback syntax is correct. searchTerm$ can be any observable.

3. Final Answer:

   switchMap is used without pipe() -> Option C

4. Quick Check:

   Operators need pipe() to work [OK]

Hint: Always use pipe() to apply switchMap on observables [OK]

Common Mistakes:

• Calling switchMap directly on observable
• Confusing http.get with http.post
• Miswriting subscribe callback

5. You want to implement a live search input in Angular that cancels previous HTTP requests when the user types fast. Which RxJS operator should you use and why? searchTerm$.pipe( /* what operator here? */ )

hard

A. mergeMap, because it merges all requests and shows all results

B. exhaustMap, because it ignores new requests while one is active

C. concatMap, because it queues requests and processes them one by one

D. switchMap, because it cancels previous requests and uses only the latest

Solution

1. Step 1: Understand live search requirements

   Live search needs to cancel previous HTTP requests if the user types again quickly to avoid outdated results.

2. Step 2: Match operator behavior

   switchMap cancels previous inner observables (HTTP requests) and switches to the latest, perfect for live search. mergeMap merges all requests, concatMap queues them, exhaustMap ignores new while active.

3. Final Answer:

   switchMap, because it cancels previous requests and uses only the latest -> Option D

4. Quick Check:

   Live search = switchMap cancels old requests [OK]

Hint: Use switchMap to cancel old HTTP calls on new input [OK]

Common Mistakes:

• Using mergeMap causing multiple overlapping requests
• Using concatMap causing delayed responses
• Using exhaustMap ignoring new inputs