Reactivity sits at the core of Angular, and RxJS is the engine that drives it. The library recently reached its seventh major release, and Angular 12.2 already ships with support for it. Here is a rundown of the most notable changes and what they mean for developers.

1. Leaner bundles

Bundle size is the first thing that stands out. RxJS 7 is 47% smaller than version 6. If an app used every operator from the previous release, the footprint would drop from 52 KB to just 19 KB. That saving may look modest on paper, but it translates into faster load times for users on slower mobile connections.

RxJS7 – what’s new? — figure 1

2. Stronger types with newer TypeScript

The new version requires TypeScript 4.2 at minimum, which unlocks substantially better type inference. The following examples illustrate the improvements:

const subject = new Subject<number>()
subject.next()


// Now return type will be Observable<Data>, previously it was Observable<undefined>
Observable<undefined>.
of(new Date(), null, undefined)
  .pipe(filter(Boolean))
  .subscribe();

3. toPromise() moves toward deprecation

The toPromise() method is now marked as deprecated and is scheduled for removal in V8. Its replacements are lastValueFrom() and firstValueFrom(). As their names suggest, firstValueFrom() resolves with the first emission and lastValueFrom() with the final one. Both throw an error when the stream completes without emitting anything, whereas toPromise() would previously resolve with undefined. A default value can be supplied to avoid the error in empty streams.

const source = from([1, 2])

const firstVal = await firstValueFrom(source)
console.log(firstVal) // 1

const lastVal = await lastValueFrom(source)
console.log(lastVal) // 2

// Define default value
const firstVal = await firstValueFrom(source, { defaultValue: 'empty' }
)

4. Operator renaming

  • combineLatest becomes combineLatestWith
  • merge becomes mergeWith
  • zip becomes zipWith
  • race becomes raceWith
  • concat becomes concatWith

The previous names will disappear entirely in the next major release.

5. subscription.add() loses its return value

Developers used subscription.add() to group subscriptions and tear them down together. The RxJS creator has acknowledged that this pattern is flawed and prone to subtle unsubscribe bugs (source). Now subscription.add() returns void, and the maintainers recommend alternatives like takeUntil.

RxJS7 – what’s new? — figure 2

BAD

RxJS7 – what’s new? — figure 3

GOOD

6. retry gains resetOnSuccess

In earlier versions, the retry counter was never reset when a value was successfully emitted. RxJS 7 adds a configuration option to change that behaviour.

retry({
  count: 1, 
  resetOnSuccess: true 
})

7. Reworked sharing operators

Several operators are now deprecated: multicast, publish, publishReplay, publishLast, and refCount. The shareReplay operator was also on the chopping block, but its widespread adoption has kept it in the current release. It may still be removed in the future. For the long term, share, connect, and connectable are the intended survivors. In version 7, share accepts extra configuration parameters, allowing developers to define custom stream behaviour.

share({
 connector: () => new ReplaySubject(),
 resetOnRefCountZero: true,
 resetOnComplete: true,
 resetOnError: true
})

Summary

These highlights only scratch the surface of what RxJS 7 brings. More details can be found in the following resources:

Which of these changes will have the biggest impact on your projects? Share your thoughts in the comments.