Back to the homepage
RxJS

RxJS7 – what’s new?

Reactivity is an indispensable part of Angular, and with it comes RxJS, which recently had the debut of its seventh version. Angular version 12.2 started supporting this version of RxJS, so let’s take a look at what we can expect.

1. Smaller bundle size

The first improvement is a smaller bundle size. RxJS 7 is 47% smaller than its predecessor. If your application used all the operators from version 6, which would require 52 KB, in version 7 it will be only 19 KB. This might not seem like much, but for a mobile user with a slow internet connection, every KB matters.

2. Better typing – the latest Typescript

RxJS 7 requires Typescript at least version 4.2, which provides significant improvements in the context of typing. Let’s just look at the examples below:

3. Deprecate toPromise()

The toPromise operator has been marked as deprecated and will be removed in V8. Instead, we get two new operators lastValueFrom() and firstValueFrom(). As the name implies, firstValueFrom returns the first value of the stream, and lastValueFrom returns the last value from the observed stream. If no values are emitted, an error will be reported, unlike toPromise, which resolves to an undefined value. If we want to avoid an error if no values are emitted, we can define a default value.

4. Change of the operators names

  • combineLatest changed to combineLatestWith
  • merge changed to mergeWith
  • zip changed to zipWith
  • race changed to raceWith
  • concat changed to concatWith

Old operators will be completely removed, with the next major release.

5. Making unable to merge subscriptions using subscrption.add()

Subscritption.add() was used to link multiple subscriptions together so that we could unsubscribe all of them at once. Unfortunately, as the creator himself confirms, this approach is flawed and can lead to a lot of unexpected behavior in the context of unsubscribing (źródło). From now on, subscription.add() returns void, and the RxJS creator himself recommends, among other things, using the takeUntil operator.

BAD

GOOD

6. Retry operator with resetOnSuccess parameter

Previously, the retry operator parameter was not reset ‘onSuccess’.  We now get an option which allows us to configure this behavior.

7. Big changes within “Sharing operators”

The following operators were marked as deprecated – multicast, publish, publishReplay, publishLast, and refCount. It was also planned to get rid of the shareReplay operator, but at the moment it is very popular among developers so it remains in the next version of RxJS. However it is expected that in the future it will also join the operators mentioned above. In the long run, the share, connect and connectable operators will remain. For now, it is recommended to move to the share operator. In version 7 it gains some additional configuration parameters where we can define custom behavior for our stream.

Summary

This is just a selection of the new features coming into force with RxJS 7. You can read more about the update at the following links:

Let us know in the comments which change is most important to you and why 😉

About the author

Mateusz Stefańczyk

Mateusz is an avid editor of angular.love. In the portal for many years. A fan of all types of consoles and india games. He is a football fan – both real and virtual. Every weekend, he gets comfortable in his armchair, fastens his seat belt, and enjoys the European football games.

Do you want to create articles for our blog together with us? Join us and create valuable content for Angular fans with Angular.love!

Leave a Reply

Your email address will not be published. Required fields are marked *