RxJS 7 is released 🎉

vazsonyidl

vazsonyidl

Posted on May 6, 2021

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.

image

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();
Enter fullscreen mode Exit fullscreen mode

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 })
...
Enter fullscreen mode Exit fullscreen mode

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)
)
Enter fullscreen mode Exit fullscreen mode

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),
  }
)
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
vazsonyidl
vazsonyidl

Posted on May 6, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

RxJS 7 is released 🎉
webdev RxJS 7 is released 🎉

May 6, 2021

Javascript Closures
webdev Javascript Closures

February 4, 2021

PureScript cuica on klank.dev
webdev PureScript cuica on klank.dev

November 11, 2020

How Javascript works
javascript How Javascript works

March 27, 2020