How to share your RxJS observables for improved performance

In this tutorial, we investigate how to cache and share an observable stream so that we don't need to continually call the set up code for the source observable for each new subscription (e.g. we don't need to make multiple HTTP requests, or set up web sockets, or other potentially expensive operations).

0:00 Introduction
0:56 A "cold" observable
2:38 Caching the observable
3:40 Making it "hot" with share
5:22 shareReplay
7:48 refCount

#angular #rxjs #observables

[Kyumia]

For the people watching this almost a year later, Ben Lesh (RxJS dev) recommends using share({connector: new ReplaySubject(1)}) instead of shareReplay({bufferSize: 1, refCount: true}). It's the equivalent; the refCount is already set to true in the share() operator. The RxJS devs said they would probably deprecate shareReplay(1) in the future like the other multicasting operators such as: multicast, publish, publishReplay, publishLast, and refCount (already deprecated in RxJS 7). shareReplay still only exists due to its popularity and is now a wrapper around the highly configurable share operator. Source: Reactive Patterns with RxJS for Angular (e-Book)

[greatsuccess]

The way you explain the details is just awesome. Keep these rxjs videos coming. Thanks

[salehabuhussein]

You are the GOAT of angular and reactive programming

[olmanmora]

This channel is a must-follow for any Angular Dev

[buildmore]

Finally found someone who not just knows it deep but is able to explain it ! Thanks

[gosnooky]

This a great channel. I don't use Angular - never have, never will, but I do use NestJS quite often and it's "Angular-inspired" and uses RxJS under the hood. Sometimes I need to tap into their use of observables and I never understand RxJS very well, but these videos help.

[sergioccarneiro]

The refCount was the icing on the cake 👌

[NickCarboneDrum]

Your communication skills are next level. Kudos and thank you! 🎉🎉🎉

[BraveTravelerK]

Really nice content and well explained, but I just got a few notes you might want to take into your next video:
- avoid implicit any as return-type for methods (eg. getclients() )
- maybe show the approach on how to build a ReplaySubject itself instead of an Observerable object
- import stricter linter rules

These are all optional but IMHO make the code alot more understandable/readable.

[Exiltruman]

Great video, Joshua!
One thing though, in "watchClient" you could have used "filter" operator instead of "map" with "find".

[tuvok]

if i do exactly but with students instead of clients than i get an error TS2345: Argument of type is not assignable to parameter of type | (DocumentData & { id: string; }))[], Student[]>'. I honestly never saw that before.

[PabloEmanuelCabrera]

What happens if instead of using firestore you get the data by doing a http request? How can I update my clients$ value with the new data? I mean, is there way to re-execute the http request after we know the database has been updated?

[sick]

Hi Joshua great video, a question about the check to see if you have clients, in a case where the request returns a subset of clients and need the next subset how would you do that?

[AyushSeth-czvu]

Let's say this was a regular http call to get clients, which is now permanently cached. If you were to now make a mutation like calling addClient(), then how would you invalidate the existing hot observable that returns you a list of all client because that list is now outdated?

[lithixz]

Thanks for providing that detailed insight.
Could you create a video on how to implement the updateClient methods etc. for that performant version as I am having my struggles on adapting to the other methods.

[tanishqmanuja]

Thanks for amazing content as usual . Can u also make a video explaining difference between behavioural subject vs replay subject vs share replay and the whats the best scenario to use them. Couldn't understand that because rxjs docs are not that good IMHO

[MrLolhaha]

What if we have 2 different components? Say a list of clients, which upon clicking on a client name, it redirects to the client detail page. Will that still make use of the shareReplay observable and act like a centralised hub of data, akin to data management like ngrx? Thanks :)

[Asaloy]

You really should show it how it works with real data flowing and not just with showing code.

[florianfrank]

Pleeease add returntypes to your methods 🥲