mergeMap vs concatMap vs exhaustMap in Angular - When to Use Which

The Big Idea

Discover how these three operators can save your app from chaos when handling many tasks at once!

The Scenario

Imagine you have multiple tasks that start one after another, like sending several requests to a server when a user clicks buttons quickly.

You try to handle each request manually, starting a new one every time without waiting for the previous to finish.

The Problem

Manually managing these overlapping tasks is confusing and error-prone.

You might send too many requests at once, causing overload or unexpected results.

Or you might accidentally ignore some tasks or run them in the wrong order.

The Solution

Using mergeMap, concatMap, and exhaustMap operators in Angular helps control how tasks run and overlap.

They let you decide if tasks run all at once, one after another, or ignore new tasks while busy.

This makes your code simpler, safer, and easier to understand.

Before vs After

✗ Before

buttonClicks.forEach(() => { sendRequest(); });

✓ After

buttonClicks.pipe(mergeMap(() => sendRequest()));

What It Enables

They enable smooth, predictable handling of multiple asynchronous tasks, improving app performance and user experience.

Real Life Example

When a user clicks a search button multiple times quickly, concatMap queues the requests so they run one by one, avoiding server overload.

Key Takeaways

mergeMap runs all tasks simultaneously.

concatMap runs tasks one after another, preserving order.

exhaustMap ignores new tasks while one is running.

Practice

1. Which RxJS operator runs all inner tasks at the same time and emits results as they complete, without waiting for order?

easy

A. switchMap

B. concatMap

C. exhaustMap

D. mergeMap

Solution

1. Step 1: Understand mergeMap behavior

   mergeMap subscribes to all inner observables immediately and merges their outputs as they arrive.

2. Step 2: Compare with other operators

   concatMap waits for each inner observable to complete before starting the next, exhaustMap ignores new inner observables if one is active, and switchMap cancels previous inner observables.

3. Final Answer:

   mergeMap -> Option D

4. Quick Check:

   Runs all tasks at once = mergeMap [OK]

Hint: All tasks at once means mergeMap [OK]

Common Mistakes:

• Confusing concatMap with mergeMap because both handle multiple tasks
• Thinking exhaustMap runs all tasks simultaneously
• Mixing switchMap behavior with mergeMap

2. Which of the following is the correct syntax to use concatMap in an Angular RxJS pipe?

easy

A. concatMap(source$, value => inner$)

B. source$.pipe(concatMap(value => inner$))

C. source$.concatMap(value => inner$)

D. source$.pipe(map(concatMap(value => inner$)))

Solution

1. Step 1: Recall RxJS pipe usage

   Operators like concatMap are used inside pipe() method on observables.

2. Step 2: Check syntax correctness

   source$.pipe(concatMap(value => inner$)) correctly uses source$.pipe(concatMap(...)). Options A and B misuse method chaining or function call. source$.pipe(map(concatMap(value => inner$))) wrongly nests concatMap inside map.

3. Final Answer:

   source$.pipe(concatMap(value => inner$)) -> Option B

4. Quick Check:

   Use pipe with concatMap inside [OK]

Hint: Always use pipe() with concatMap inside [OK]

Common Mistakes:

• Calling concatMap directly on observable without pipe
• Passing concatMap as argument to map
• Using concatMap as a standalone function

3. Given the code below, what will be the output order of emitted values?

import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

of(1, 2, 3).pipe(
  concatMap(x => of(x).pipe(delay(100 - x * 10)))
).subscribe(console.log);

medium

A. [3, 2, 1]

B. [1, 3, 2]

C. [1, 2, 3]

D. [2, 1, 3]

Solution

1. Step 1: Understand concatMap behavior with delays

   concatMap waits for each inner observable to complete before starting the next, preserving order.

2. Step 2: Analyze delays and emission order

   Even though delays differ (90ms, 80ms, 70ms), concatMap queues them and emits in source order: 1, then 2, then 3.

3. Final Answer:

   [1, 2, 3] -> Option C

4. Quick Check:

   concatMap preserves order despite delays [OK]

Hint: concatMap keeps order even if inner delays differ [OK]

Common Mistakes:

• Assuming output order matches delay times
• Confusing concatMap with mergeMap behavior
• Ignoring that concatMap queues inner observables

4. You have this code snippet using exhaustMap. It should ignore new clicks while processing, but it processes all clicks anyway. What is the likely mistake?

buttonClicks$.pipe(
  exhaustMap(() => fetchData())
).subscribe();

medium

A. fetchData() returns a promise, not an observable

B. Using exhaustMap instead of mergeMap

C. Not subscribing to the observable

D. Not returning an observable inside exhaustMap

Solution

1. Step 1: Check exhaustMap inner function return type

   exhaustMap expects the function to return an observable. If fetchData() returns a promise, it won't behave correctly.

2. Step 2: Understand effect of returning a promise

   Promises are not cancellable observables, so exhaustMap can't ignore new clicks properly, causing all clicks to process.

3. Final Answer:

   fetchData() returns a promise, not an observable -> Option A

4. Quick Check:

   exhaustMap needs observables, not promises [OK]

Hint: exhaustMap requires observables, not promises [OK]

Common Mistakes:

• Thinking exhaustMap works with promises automatically
• Forgetting to subscribe to the observable
• Confusing exhaustMap with mergeMap usage

5. You want to handle user search input so that if a search is running, new inputs are ignored until it finishes. Which operator should you use and why?

searchInput$.pipe(
  ???(query => performSearch(query))
).subscribe(results => display(results));

hard

A. exhaustMap because it ignores new searches while one is running

B. concatMap because it queues searches and runs them one by one

C. mergeMap because it runs all searches simultaneously

D. switchMap because it cancels previous searches on new input

Solution

1. Step 1: Understand the requirement

   The user wants to ignore new search inputs while a search is running, preventing duplicates.

2. Step 2: Match operator behavior

   exhaustMap ignores new inner observables if one is active, perfect for this use case. mergeMap runs all, concatMap queues, switchMap cancels previous.

3. Final Answer:

   exhaustMap because it ignores new searches while one is running -> Option A

4. Quick Check:

   Ignore new inputs during active task = exhaustMap [OK]

Hint: Ignore new tasks while running = exhaustMap [OK]

Common Mistakes:

• Choosing switchMap which cancels previous instead of ignoring
• Using mergeMap which runs all searches simultaneously
• Using concatMap which queues instead of ignoring