RxJS 7 is released 🎉

Intro

RxJS v7.0.0 was released just a few days ago, after a more-than-one-year long beta period. It is definitely the most used reactive extension library used for JavaScript with ~24 millions download per week.
Npm page

There are no removal yet, but a lot of deprecations - that will be removed later - so it is recommended to allocate time for the RxJS update!

What's new

It is not that much upgrade that was the previous major package updates, but there are several notable differences between version 6 and seven, let's take a closer look.

Smaller bundle size

It is worth a point that the whole package had been walked through by the creators to check out where are possibilities to - at the end - reduce the bundle size. There were no major refactor with the app - as I saw and read.

Maybe the reduce size is not that outstanding, but every kB counts with slow network especially on mobile. You may see the reducing trend in the chart, it is a good way to go. :)

You can check out the bundle size here, on Bundlephobia.

Latest TypeScript & better type interference

RxJS uses the latest TypeScript (as of 2021.05.06) and also has some real improvements interfering different types. The limit, that around ~7/8 argument RxJS was not able to handle types no longer exists!

There is another example for this, let's take a look at this.

of(new Date(), null, undefined)
  .pipe(filter(Boolean))
  .subscribe();

Now, the type will be Observable<Date>, but it was Observable<undefined> in RxJS 6.

toPromise deprecation

Maybe this is not relevant for someone but a lot of projects may be affected from this. toPromise is deprecated in RxJS 7 and there are two new operators replacing this one, called firstValueFrom and lastValueFrom. It is a huge improvement for reliability for many codebases.

AS the name indicates, firstValueFrom resolves with the first value of a stream, and lastValueFrom return with the last value from the observable stream. If no values emitted, an error is thrown. Unlike toPromise, which resolves simply with undefined.

Operators renamed

I remember we had a discussion with the team that: "wish the operators in RxJS could have more talkative names". It happened, so the following operators are renamed

• combineLatest -> combineLatestWith
• merge -> mergeWith
• zip -> zipWith
• concat -> concatWith
• race -> raceWith

Retry operator with resetOnSuccess

Previously the retry operator's parameter was not reseted after successful attempts. Now there is a configuration option to indicate this.

...
retry({ count: 2, resetOnSuccess: true })
...

Removing multiple callback options

In RxJS 7 the multiple callback for done, error, complete had been removed from tap and subscribe. Now you need to pass an object for these configuration, just to force you to think it two times and make sure.

Now, instead of this

obs$.pipe(tap(
  data => console.log(data),
  error => console.log(error)
)).subscribe(
  data => console.log(data),
  error => console.log(error)
)

Now you have to do the following:

source$.pipe(tap(
  data => console.log(data)
)).subscribe(
  {
    next:  data => console.log(data), 
    error:  err => console.log(err),
  }
)

Faster

According to some tweets and discussions, developers claims that RxJS 7 is faster. Still, it needs to stand the probe of time, but I think it will. :)

Footnote

Of course there are several other updates in RxJS and shoutout to the developer team for releasing this package. You can read more about the update in details on the following links:

Change summary
Medium article
inDepth article

Comments

[Lyrod]

I don't understand the toPromise deprecation. You can't convert an observable to a promise?

It was helpful for unit tests

[vazsonyidl]

It depends on your test setup, without any other info it is hard to reply. :( Maybe you could give a try for lastValueFrom instead of toPromise as it is planned to replace that one-in-one.

Or if your setup was something like this one :

    this.items = await this.itemService
      .getItems()
      .toPromise()

Now you can use this instead:

    const items$ = this.itemService.getItems();
    this.items = await lastValueFrom(items$);

I hope I can help you, but reply if do not. :)

[Lyrod]

This is exactly what I do in my tests! Thanks!