--- title: Always Know When to Use Share vs. ShareReplay description: Understand the differences between share and shareReplay and when you should (or shouldn't) use them image: https://www.bitovi.com/hubfs/Always%20Know%20When%20to%20Use%20Share%20vs.%20ShareReplay.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 24, 2022 # Always Know When to Use Share vs. ShareReplay Understand the differences between share and shareReplay and when you should (or shouldn't) use them ![Fábio Englert Moutinho](https://www.bitovi.com/hubfs/Imported%20images/T02B04353-U0293HY2Q6S-528651d5ff8c-512.jpeg) Fábio Englert Moutinho 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=) Using `share` and `shareReplay` is pretty darn confusing. The way `share` and `shareReplay` work is not always obvious and might lead to unexpected behavior in your application. Fortunately, you have found this article and after reading you’ll understand the differences between `share` and `shareReplay`. ## share The `share` operator will [ multicast ](https://en.wikipedia.org/wiki/Multicast) values emitted by a source Observable for subscribers. Multicast means data is sent to multiple destinations. As such, `share` allows you to avoid multiple executions of the source Observable when there are multiple subscriptions. `share` is particularly useful if you need to prevent repeated API calls or costly operations executed by Observables. The slightly modified code from the [official documentation](https://rxjs.dev/api/operators/share) below has a shared source Observable that emits random numbers at 1-second intervals, up to two emissions. You can also run the example on [StackBlitz](https://stackblitz.com/edit/mpkssl?devToolsHeight=100&file=index.ts). ``` import { interval, tap, map, take, share } from 'rxjs'; const source$ = interval(1000).pipe( tap((x) => console.log('Processing: ', x)), map(() => Math.round(Math.random() * 100)), take(2), // if you remove share, you will see that // each subscription will have its own execution of the source observable share() ); source$.subscribe((x) => console.log('subscription 1: ', x)); source$.subscribe((x) => console.log('subscription 2: ', x)); setTimeout( // this subscription arrives late to the party. What will happen? () => source$.subscribe((x) => console.log('subscription 3: ', x)), 1500 ); /* Example Run ### share operator logs: --- 1 second Processing: 0 subscription 1: 33 subscription 2: 33 --- 2 seconds Processing: 1 subscription 1: 12 subscription 2: 12 subscription 3: 12 ### without share operator logs: --- 1 second Processing: 0 subscription 1: 55 Processing: 0 subscription 2: 65 --- 2 seconds Processing: 1 subscription 1: 64 Processing: 1 subscription 2: 2 --- 2.5 seconds Processing: 0 subscription 3: 42 --- 3.5 seconds Processing: 1 subscription 3: 95 */ ``` ### share 's Inner Observable: Subject When you subscribe to a shared Observable, you are [actually subscribing to a Subject](https://github.com/ReactiveX/rxjs/blob/7.5.5/src/internal/operators/share.ts#L192) exposed by the `share` operator. The `share` operator [also manages an inner Subscription to the source Observable](https://github.com/ReactiveX/rxjs/blob/7.5.5/src/internal/operators/share.ts#L235). The inner `Subject` is the reason multiple subscribers receive the same shared value, as they are receiving values from the `Subject` exposed by the `share` operator. See [previous example on StackBlitz](https://stackblitz.com/edit/mpkssl?devToolsHeight=100&file=index.ts). ### share's RefCount `share` keeps a count of subscribers. Once the subscriber count reaches `0`, `share` will unsubscribe from the source Observable and reset its inner Observable (the `Subject`). The following (late) subscriber will trigger a new Subscription to the source Observable, or in other words, a new execution of the source Observable. Here’s an example of this behavior, [also available on StackBlitz](https://stackblitz.com/edit/uwwa2f?devToolsHeight=100&file=index.ts). ``` import { defer, delay, of, share, shareReplay, tap } from 'rxjs'; const source$ = defer(() => of(Math.round(Math.random() * 100))).pipe( tap((x) => console.log('Processing: ', x)), delay(1000), // shareReplay({ bufferSize: 1, refCount: true }), share() ); source$.subscribe((x) => console.log('subscription 1: ', x)); source$.subscribe((x) => console.log('subscription 2: ', x)); setTimeout( () => source$.subscribe((x) => console.log('subscription 3: ', x)), 3500 ); ``` ## shareReplay In some cases what you really need is a `share` that is able to behave as a [BehaviorSubject](https://rxjs.dev/api/index/class/BehaviorSubject) would. For example: if a cold Observable has a `share` operator, like the code example above, a late subscriber to it would never get the values emitted before the subscription because it subscribed after `share` operator reached `refCount` 0, which means the `share` operator unsubscribed from the source Observable and reset its inner Subject. The late subscriber would thus subscribe to a new inner Subject, which runs a new execution of the source Observable, in this case that means a second API call: exactly the opposite of what you really needed. That's why `shareReplay` exists: it both shares the source Observable and replays the last emissions for late subscribers. Also, it does not keep a count of subscribers by default, but you may use the refCount option with a `true` value to enable that behavior. ### shareReplay's Inner Observable: ReplaySubject In contrast to `share`, `shareReplay` exposes a `ReplaySubject` to subscribers. `ReplaySubject(1)` is very [similar](https://rxjs.dev/api/index/class/ReplaySubject#differences-with-behaviorsubject) to a `BehaviorSubject`. ### shareReplay's RefCount Since `shareReplay` does not keep track of a subscriber count by default, it is not able to unsubscribe to the source Observable. Ever. Unless you use the `refCount` option. In order to use `shareReplay` while getting rid of memory leak issues you can use `bufferSize` and `refCount` options: `shareReplay({ bufferSize: 1, refCount: true })`. `shareReplay` never resets its inner `ReplaySubject` when `refCount` reaches 0, but does unsubscribe from the source Observable. Late subscribers will not trigger a new execution of the source Observable and will receive up to `N (bufferSize)` emissions. [Play with the previous example on StackBlitz](https://stackblitz.com/edit/uwwa2f?devToolsHeight=100&file=index.ts) to see the difference. ## Use with Caution In Angular, there are some gotchas when using `share` and `shareReplay`. Observables subscribed in the template with the `async` pipe might reach refCount `0` if unsubscribed automatically by the `async` pipe when inside a `*ngIf`, which would cause a new execution of the source Observable. You might feel like the God of Time and Cache using `share` and `shareReplay`, but you should be aware that with great power comes great responsibility. If you want a partner to help you manage the high complexity of `share`, `shareReplay` and RxJS best practices, [contact us today](mailto:contact@bitovi.com). 🙂 ### Do you have thoughts? [![discord-mark-blue](https://www.bitovi.com/hs-fs/hubfs/discord-mark-blue.png?width=69&height=52&name=discord-mark-blue.png)](https://discord.gg/J7ejFsZnJ4)We’d love to hear them! Join our [Community Discord](https://discord.gg/J7ejFsZnJ4) to continue the conversation.   [![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 ![How to Incrementally Migrate an Angular Project to TypeScript Strict Mode](https://www.bitovi.com/hs-fs/hubfs/How%20to%20Incrementally%20Migrate%20an%20Angular%20Project%20to%20TypeScript%20Strict%20Mode.png?height=117&name=How%20to%20Incrementally%20Migrate%20an%20Angular%20Project%20to%20TypeScript%20Strict%20Mode.png) [ How to Incrementally Migrate an Angular Project to TypeScript Strict Mode ](https://www.bitovi.com/blog/how-to-incrementally-migrate-an-angular-project-to-typescript-strict-mode)   Next Post ![How ComponentFactoryResolver can unlock powerful higher-order components](https://www.bitovi.com/hs-fs/hubfs/How%20ComponentFactoryResolver%20can%20unlock%20powerful%20higher-order%20components.png?height=117&name=How%20ComponentFactoryResolver%20can%20unlock%20powerful%20higher-order%20components.png) [ How ComponentFactoryResolver can unlock powerful higher-order components ](https://www.bitovi.com/blog/how-componentfactoryresolver-can-unlock-powerful-higher-order-components) ```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/always-know-when-to-use-share-vs.-sharereplay", "@type" : "WebPage", "description" : "Understand the differences between share and shareReplay and when you should (or shouldn't) use them" }, "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" : "Fábio Englert Moutinho" }, "dateModified" : "September 29, 2023, 7:55:50 PM", "datePublished" : "2022-06-24 13:00:00", "description" : "Understand the differences between share and shareReplay and when you should (or shouldn't) use them", "headline" : "Always Know When to Use Share vs. ShareReplay", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/Always%20Know%20When%20to%20Use%20Share%20vs.%20ShareReplay.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```