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:
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. 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.
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. 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.
retry({
count: 1,
resetOnSuccess: true
})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.
share({
connector: () => new ReplaySubject(),
resetOnRefCountZero: true,
resetOnComplete: true,
resetOnError: true
})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:
- Official presentation of RxJS 7 (speech + slides)
- Change summary
- Medium
- inDepth
Let us know in the comments which change is most important to you and why ?