withLatestFrom – RxJS Reference

withLatestFrom

Q: How does withLatestFrom differ from combineLatest in RxJS?

withLatestFrom emits only when the source (guiding) observable emits, while combineLatest emits whenever any of its input observables emits. With withLatestFrom, the other streams only update an internal cache of their latest values, so the result is produced on each emission of the stream you call it on. Both wait for at least one value from every input before emitting anything.

Q: How do I combine an observable with the latest value from another observable in RxJS?

Use the withLatestFrom() operator in a pipe on the stream that should drive emissions, passing the other observable as an argument, for example b.pipe(withLatestFrom(a)). Each time b emits, you receive a group of values made from the most recent value of a. If a has not emitted yet, b's values are dropped until it does.

Q: Does withLatestFrom complete when the source observable completes?

withLatestFrom never completes unless the guiding stream completes. When the guiding stream (the source observable it is piped from) completes, the operator sends the complete notification to the observer, and it may complete without emitting anything if no inner stream has produced a value. If any of the other input observables errors, the error is forwarded to the observer.

Q: Why does withLatestFrom not emit when the other observable emits?

Because withLatestFrom only emits when the guiding stream emits; emissions from the other inputs just update their cached latest value. A common cause of silence is that the inner observable has not emitted yet, since the operator waits for at least one value from each stream before emitting. Make sure the inner stream emits early, or use combineLatest if you need output on every change.

withLatestFrom combines the source observable with other streams and emits values calculated from the latest values of each, only when the source emits. While the similar combineLatest operator emits a new value whenever there’s a new emission from any of the input streams, withLatestFrom emits a new value only if there’s a new emission from the guiding stream.

Just as with combineLatest it still waits for at least one emitted value from each stream and may complete without a single emission when the guiding stream completes. It will never complete if the guiding stream doesn’t complete and will throw an error if any of the inner streams errors out.

The operator works in the following way:

Subscribe to the guiding stream
Subscribe to all other input observables
When a source observable emits a value, override the value in the cache corresponding to this observable
When a guiding stream emits a value, emit the values from each source observable as a group
When a guiding stream completes, send the complete notification to the observer
If any of the source observables throws an error, send the error notification to the observer.

In the diagram below you can see the withLatestFrom operator combining two streams A and B with the stream B being the guiding stream. Every time the stream B emits a new value the resulting sequence produces a combined value using latest value from the stream A:

withLatestFrom operator diagram

Here is the code example that demonstrates the setup shown by the above diagram:

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

b.pipe(withLatestFrom(a)).subscribe(fullObserver(operator));

And the editable demo:

Usage

This operator can be used when you have one stream that drives emissions but also need to combine its values with latest values from other streams.

Additional resources

Official documentation

Frequently asked questions

How does withLatestFrom differ from combineLatest in RxJS?

withLatestFrom emits only when the source (guiding) observable emits, while combineLatest emits whenever any of its input observables emits. With withLatestFrom, the other streams only update an internal cache of their latest values, so the result is produced on each emission of the stream you call it on. Both wait for at least one value from every input before emitting anything.

How do I combine an observable with the latest value from another observable in RxJS?

Use the withLatestFrom() operator in a pipe on the stream that should drive emissions, passing the other observable as an argument, for example b.pipe(withLatestFrom(a)). Each time b emits, you receive a group of values made from the most recent value of a. If a has not emitted yet, b's values are dropped until it does.

Does withLatestFrom complete when the source observable completes?

withLatestFrom never completes unless the guiding stream completes. When the guiding stream (the source observable it is piped from) completes, the operator sends the complete notification to the observer, and it may complete without emitting anything if no inner stream has produced a value. If any of the other input observables errors, the error is forwarded to the observer.

Why does withLatestFrom not emit when the other observable emits?

Because withLatestFrom only emits when the guiding stream emits; emissions from the other inputs just update their cached latest value. A common cause of silence is that the inner observable has not emitted yet, since the operator waits for at least one value from each stream before emitting. Make sure the inner stream emits early, or use combineLatest if you need output on every change.

Share this post