When to use switchMap vs concatMap

Question

With the help of an example, can u please tell me When to use switchMap vs concatMap?

Answer 1

In Angular (and RxJS), switchMap and concatMap are used to flatten higher-order Observables, but they behave differently. Here's when to use each:

switchMap

Behavior: Cancels the previous inner Observable when a new outer value arrives.

Use Case: Ideal for scenarios where only the latest emission matters (e.g., search inputs, autocomplete).

Example:

searchInput$.pipe(

  switchMap((query) => this.http.get(`/api/search?q=${query}`)) // Cancels previous search

).subscribe((results) => console.log(results));

concatMap

Behavior: Processes inner Observables sequentially, waiting for each to complete before starting the next.

Use Case: Ideal for scenarios where order and completeness matter (e.g., sequential API calls, queued tasks).

Example:

fileUploads$.pipe(

  concatMap((file) => this.http.post('/api/upload', file)) // Processes files one by one

).subscribe((response) => console.log(response));