--- title: "What’s New in RxJS 7: Small Bundles and Big Changes to share()" description: Learn how RxJS 7 can help your team ship smaller bundles with faster reactive code. image: https://www.bitovi.com/hubfs/rxjs7.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | June 2, 2021 # What’s New in RxJS 7: Small Bundles and Big Changes to share() Learn how RxJS 7 can help your team ship smaller bundles with faster reactive code. ![Kyle Nazario](https://www.bitovi.com/hubfs/People/kyle-nazario.jpeg) Kyle Nazario Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) RxJS 7 has shipped! For us [Angular developers](https://www.bitovi.com/why-build-with-angular), it unfortunately [did not ship in time for Angular 12](https://github.com/angular/angular/issues/41897#issuecomment-831981692). I've summarized key takeaways from [Ben Lesh’s talk from RxJS Live Asia](https://youtu.be/0S5ISwDaFHI?t=1893) and his [slides](https://docs.google.com/presentation/d/1-LU7YE3NWw8jHeAgdmLu4CBfG7osCx6MsSIeFs16k60/edit?usp=sharing) below. [Lesh](https://twitter.com/benlesh?lang=en) is a member of the RxJS core team and formerly worked at Google on the Angular team. ## Big Feature: Smaller Bundle Sizes Lesh said while RxJS 7 was “a bit faster,” the big improvement for the new version is its bundle size. RxJS 7 is 53% the size of RxJS 6. If your app used every operator in version 6, that would require 52 KB, but the same thing in RxJS 7 requires just 19 KB. “This was done via a refactor, a hundred-point improvement of going around and individually moving around code, keeping the same tests, keeping the same code, and moving things around slowly but surely until we got to a place where we could see daylight and we were able to refactor larger portions of the code,” Lesh said in his talk. See this chart of operator sizes in RxJS 6: ![Image-Jun-01-2021-06-28-15-06-PM](https://www.bitovi.com/hs-fs/hubfs/Image-Jun-01-2021-06-28-15-06-PM.png?width=1454&name=Image-Jun-01-2021-06-28-15-06-PM.png) And this chart of the same operator sizes in RxJS 7: ![Image-Jun-01-2021-06-28-42-31-PM](https://www.bitovi.com/hs-fs/hubfs/Image-Jun-01-2021-06-28-42-31-PM.png?width=1453&name=Image-Jun-01-2021-06-28-42-31-PM.png) ## Consolidating Sharing operators Lesh’s talk includes a long discussion about how many ways RxJS lets you share a stream (`multicast`, `shareReplay`, `refCount`, etc). RxJS 7 deprecates `multicast`, `publish`, `publishReplay`, `publishLast`, and `refCount`. `shareReplay` was too popular to deprecate in 7, but Lesh said it's next because it is "full of footguns.” Long term, the only sharing operators will be `share`, `connect` and `connectable`. He recommends moving to `share` now. `share` is picking up some new features as the single solution operator. It takes an optional config object as a parameter, where you can define custom behavior for the stream. ``` share({ connector: () => new ReplaySubject(), resetOnRefCountZero: true, resetOnComplete: true, resetOnError: true}) ``` ## Better TypeScript Typings RxJS 7 [requires TypeScript 4.2](https://github.com/ReactiveX/rxjs/blob/6bd1c5f3cf0e387973b44698c48bc933e8c528aa/package.json#L9), Lesh said, because it contains features that enable more accurate, stricter types. One example he gave in his slides involved `Subject`: ``` // allowed in RxJS 6, errors in 7 because next() must be called with a numberconst subject = new Subject()subject.next() ``` For teams that are unable to upgrade to TypeScript 4.2, Lesh recommended staying on RxJS 6, which the RxJS team will continue to support. ## toPromise() Deprecated The problem with `toPromise()`, Lesh explained, was that it didn't make sense with Observables. Should a promise created by `toPromise()` resolve with the first or last value emitted from the source Observable? So, `toPromise()` is deprecated in favor of `lastValueFrom()` and `firstValueFrom()`. These new functions still convert Observables to Promises, but in a way that clarifies that value the Promise will resolve with. ``` const source = from([1, 2])const firstVal = await firstValueFrom(source)console.log(firstVal) // 1const lastVal = await lastValueFrom(source)console.log(lastVal) // 2 ``` If an Observable completes without emitting a value, the Promise created by `lastValueFrom` or `firstValueFromrejects`. If that is not desired behavior, you can configure the new Promise to resolve with a defaultValue. ``` const emptyVal = await firstValueFrom(source, { defaultValue: 'empty' })console.log(emptyVal) // 'empty' ``` ## AsyncIterable support Anywhere you can pass an Observable, RxJS 7 also lets you pass an AsyncIterable. ``` async function* ticket(delay: number) { let n = 0; while (true) { await sleep(delay); yield n; }} ``` ## Other Updates - `finalize()` operators now run in the order in which they are written in `pipe()`. In contrast, RxJS 6 ran them in reverse. - `subscription.add(someSubscription)` now returns void so people will stop writing `add()` chains, which Lesh says never worked. ``` // add() returns void, cannot be chainedsubscription .add(subOne) .add(subTwo) // errors ``` - `animationFrames()` creates Observables to do animation logic reactively - `switchScan()` operator, aka `switchMap` with an accumulator - `throwError()` requires a callback, not an error, as the error captures the current stack at the moment of its creation ### Your `with` Is My Command - `combineLatest` operator renamed to `combineLatestWith` - `merge` operator renamed to `mergeWith` - `zip` operator renamed to `zipWith` - `race` operator renamed to `raceWith` - `concat` operator renamed to `concatWith` ## Bitovi Recommendations for Migrating to RxJS 7 If your project can be upgraded to RxJS 7, we would recommend doing so. The speed and bundle size improvements offer tangible, immediate benefits to end users. Important points to remember: - Replace your `toPromise` calls with `firstValueFrom` and `lastValueFrom` - Replace your `shareReplay` calls with `share` - Stop using `.add` chains to manage your subscriptions. Lesh [recommends `takeUntil`](https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87) If you need help upgrading to RxJS 7, [fill out our form](https://www.bitovi.com/contact). Bitovi has a team of Angular and RxJS experts who can help your team. [![Tag for javascript](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) javascript ](https://www.bitovi.com/blog/topic/javascript)[![Tag for streams](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) streams ](https://www.bitovi.com/blog/topic/streams)[![Tag for angular upgrades](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) angular upgrades ](https://www.bitovi.com/blog/topic/angular-upgrades)[![Tag for rxjs](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) rxjs ](https://www.bitovi.com/blog/topic/rxjs)[![Tag for reactive programming](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) reactive programming ](https://www.bitovi.com/blog/topic/reactive-programming) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/Banner_Images/sharon-mccutcheon-wRoyrBjSBzM-unsplash.jpg?height=117&name=sharon-mccutcheon-wRoyrBjSBzM-unsplash.jpg) [ Manage Form-Driven State with ngrx-forms (Part 2) ](https://www.bitovi.com/blog/manage-form-driven-state-with-ngrx-forms-part-2)   Next Post ![](https://www.bitovi.com/hs-fs/hubfs/Sketchtool_1200-675.jpg?height=117&name=Sketchtool_1200-675.jpg) [ Unlocking Sketch metadata: find symbols across files using sketchtool CLI, Bash, and JSON ](https://www.bitovi.com/blog/unlocking-sketch-metadata-find-symbols-across-files-using-sketchtool-cli-bash-and-json) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/whats-new-in-rxjs-7-small-bundles-and-big-changes-to-share", "@type" : "WebPage", "description" : "Learn how RxJS 7 can help your team ship smaller bundles with faster reactive code." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Kyle Nazario" }, "dateModified" : "January 28, 2022, 6:01:30 PM", "datePublished" : "2021-06-02 14:50:18", "description" : "Learn how RxJS 7 can help your team ship smaller bundles with faster reactive code.", "headline" : "What’s New in RxJS 7: Small Bundles and Big Changes to share()", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/rxjs7.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```