Mastering Order and Concurrency in RxJS: A Deep Dive into the concatMap Operator

Evelyn Taylor
3 min readDec 27, 2023

--

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables.

The concatMap operator is a commonly used operator in RxJS that helps in managing the order and concurrency of emitted values.

Let's dive into how the concatMap operator works.

Basic Usage:

The concatMap operator is used to project each source value to an Observable, which is then merged into the output Observable, and emitted in order.

Here's a basic usage example:

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

const source = interval(1000).pipe(take(3)); // emits 0, 1, 2
source.pipe(
concatMap(value => of(`Delayed by ${value} seconds`).pipe(delay(value * 1000)))
).subscribe(result => console.log(result));

In this example, the concatMap operator is used to project each emitted value from the source observable to a new observable created by of.

The delay operator is used to delay the emission of each value by the corresponding number of seconds.

The result is that values are emitted in order and with a delay.

How It Works:

  1. Source Observable Emits a Value:

The source observable emits a value (in this case, 0, 1, 2 from interval).

2. Projection Function is Applied:

The projection function provided to concatMap is invoked with the emitted value.

In the example, the projection function is value => of(Delayed by ${value} seconds).pipe(delay(value * 1000)).

It creates a new observable using of and delays the emission by the specified number of seconds.

3. Inner Observable is Subscribed:

The inner observable (created by the projection function) is subscribed to.

4. Values are Concatenated:

Values emitted by the inner observable are then concatenated into the output observable.

5. Next Source Value is Processed:

The process is repeated for each value emitted by the source observable.

6. Order is Maintained:

Importantly, the concatMap operator ensures that the order of emitted values is maintained.

Even though inner observables might have asynchronous operations, the next inner observable won't be subscribed to until the previous one completes.

Use Cases:

  • Sequential Requests: concatMap is often used in scenarios where you want to make sequential HTTP requests, ensuring that the next request is made only after the previous one completes.
  • Ordered Processing: If you have a sequence of tasks to perform and order matters, concatMap ensures that tasks are executed in order.
  • Flattening Observables: When you want to flatten observables but maintain the order of emitted values, concatMap is a good choice.

Considerations:

  • Concurrency: If you need concurrency, where multiple inner observables can be active simultaneously, you might want to consider other operators like mergeMap or switchMap.
  • Completion and Error Handling: concatMap handles completion and errors gracefully. It won't subscribe to the next inner observable until the previous one completes.

Understanding the behavior of concatMap and choosing the right operator for your specific use case is essential for effective and predictable reactive programming with RxJS.

Connect with me on Medium ✍ : https://medium.com/@Evelyn.Taylor

--

--

Evelyn Taylor

A front-end enthusiast and dedicated development engineer, eager to expand knowledge on development techniques and collaborate with others.