combineLatest – Merging Stream State

combineLatest is an RxJS operator that combines multiple observables by tracking the latest emitted value from each source. Once every input observable has produced at least one value, the operator emits an array (or a projected value) containing the most recent values from all sources. The operator maintains an internal cache of the last value per input observable, and it only pushes a combined emission once each source has contributed a value.

The resulting stream completes only when all inner observables have completed. If any inner observable throws an error, the error is forwarded to the observer immediately. If one of the input observables completes without emitting a value, the resulting stream completes right away without emitting anything — because it becomes impossible to include that source in future combined emissions. Similarly, if an input never emits and never completes, the combined stream will remain silent forever, waiting for that missing value.

The operator behaves according to these steps:

  1. Subscribes to every input observable.
  2. On each emission, updates the cached value associated with that observable.
  3. If all observables have at least one cached value, emits the combined array (or projected result).
  4. After all source observables complete, sends the complete notification.
  5. Sends an error notification if any source observable throws.

The diagram below illustrates combineLatest working with two streams, A and B. As soon as both streams have emitted at least once, every subsequent emission from either stream produces a fresh combined value on the result stream:

combineLatest operator diagram

The following code example mirrors the setup shown in the diagram:

const a = stream('a', 200, 3);
const b = stream('b', 500, 3);

combineLatest(a, b).subscribe(fullObserver(operator));

An editable demo is available here:

When to Use It

This operator is helpful whenever you need a combined view of several pieces of state, and that view must refresh as soon as any part changes. A common scenario is a health-check dashboard: each service exposes a stream of Boolean values that indicate availability. The overall system status is green when every service is up, so the projection function can simply apply a logical AND over the latest booleans.

Further Reading