What does ConcatMap do?
A great question, usually asked together with switchMap.
In short (as in an interview)
concatMap is an RxJS operator that processes inner Observables sequentially, one at a time, waiting for the previous one to complete.
It queues new values.
In detail
concatMap is a mapping operator that:
- takes a value from the source Observable
- creates an inner Observable
- waits for it to complete
- only then starts the next one
Example
import { of } from 'rxjs';
import { delay, concatMap } from 'rxjs/operators';
of(1, 2, 3).pipe(
concatMap(v => of(v).pipe(delay(1000)))
).subscribe(console.log);Result:
1 (after 1s)
2 (after 2s)
3 (after 3s)Even though the values arrive immediately, they execute sequentially.
Visually
source: a----b----c
concatMap:
inner a: -----
inner b: -----
inner c: -----
result: ----- ----- -----When concatMap is used
When it matters to preserve the order of operations.
For example:
- saving data
- submitting forms
- writing to a database
- a queue of API requests
- uploading files
Angular example:
this.saveClicks$.pipe(
concatMap(data => this.api.save(data))
).subscribe();Each save runs strictly in order.
Difference from switchMap
| Operator | Behavior |
|---|---|
| switchMap | cancels the previous one |
| concatMap | queues |
| mergeMap | runs in parallel |
| exhaustMap | ignores new ones |
Important point
concatMap works correctly only if the inner Observable completes.
If it never completes, the queue will hang.
For example:
concatMap(() => interval(1000)) // a bad ideaA typical follow-up question
In an interview, they often ask:
When is concatMap better than switchMap?
Answer: when operations must not be lost and the order of execution matters.
Example:
- saving form steps
- a message queue
- transactions
A simple cheat sheet (frequently asked)
You can answer like this:
switchMap - cancels concatMap - one at a time mergeMap - in parallel exhaustMap - ignores
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.