TOP 6 Mistakes in RxJS code

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DecodedFrontend.
You’ll also get 20% off an annual premium subscription.
From this video, you will learn the TOP 6 mistakes developers make when writing RxJS code. Watch this video until the end, and you will see how to make your RxJS code more reliable, clear, and performant. If you find this video useful, please share it with your colleagues and friends. Enjoy!
👉 See All Angular Courses - bit.ly/discounted-course-bundle
🕒 Time Codes:
00:00 - Intro
00:00:54 - Project Overview;
00:02:56 - Nested Subscriptions;
00:05:38 - Wrong usage of takeUntil for unsub;
00:07:20 - Manual Subscriptions;
00:09:34 - Observable re-execution;
00:12:20 - Improper usage of distinctUntilChanged();
00:14:46 - Brilliant Sponsorship;
00:15:54 - Side Effects in the wrong place;
00:17:40 - Outro;
🔗 Solution Source Code:
github.com/DMezhenskyi/angula...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
This video was sponsored by Brilliant.

[@DecodedFrontend]

To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend You’ll also get 20% off an annual premium subscription.

[@arthurfedotiew3609]

Do you use Briliant for educating yourself?

[@haroldpepete]

i think even angular's creator can learn something from your videos, you're the best

[@DecodedFrontend]

Haha, thank you for this kind words, but this is actually very far from truth 😄

[@MichaelSmallDev]

One mistake I learned about recently: not using `defer` for `valueChanges/statusChanges` observables of reactive forms. In particular, reactively declared variables outside of any hook or constructor. For example, if you have `value$ = this.form.valueChanges.pipe(startWith(this.form.value), map(.....))` and then in `ngOnInit` do something like `this.form.setValue('initial value here')`, then `value$` will not actually start with `'initial value here'` since that happens at a different time. This can be fixed by wrapping the stream* using RXJS `defer`. That allows `value$` to initialize at a later time when the observable is being subscribed to, and that is after `ngOnInit` runs and sets the value. edit: good video as always, thank you. And nice talk yesterday.

[@DecodedFrontend]

Thank you Michael for sharing your expert! I appreciate it a lot 🙌 And thanks for your kind words 😊

[@Dimonina]

Mistake 4. Won't shareReplay(1) keep the subscription active even after component is destroyed? Afair it will. In this case we can use refCount or takeUntilDestroyed BEFORE shareReplay(1).

[@DecodedFrontend]

Hey! Thanks for this comment. Yes, indeed. The shareReplay keeps the source subscription to the source observable "alive," which might be a problem if it was a long-living subscription, and usage of refCount can prevent this behavior. For HTTP calls, it is not a big issue since the HTTP call is complete immediately anyway. However, overall, you highlighted a significant nuance of the shareReplay operator, which I should have mentioned but, unfortunately, forgot to do because I was focused on other things. I think I will create a separate video about shareReplay because it is indeed an important piece of information. Ironically, I made a mistake making a video about mistakes :D

[@Dimonina]

@@DecodedFrontend yep, it would be nice to make a separate video about that. It's a very subtle thing in rxjs and experienced devs sometimes miss this moment, including myself. Thank you for your content!

[@TibinThomas1993]

Thanks for the content Adding few of my leaning below 1. The use of `debounceTime()`, `delay()`, or any other time-related operators can hinder performance, especially when there are many subscribers. 2. Late subscription to Subjects can be a challenging issue for beginners to identify and debug. 3. `TakeWhile` will unsubscribe from the stream when the specified condition is met.

[@arthuravanesyan9707]

Thank you. Of all those who talk about angular, your videos are the most useful and detailed. I like that you are not afraid to explain some things using source code, it gives a moore deep understanding of the principles of the framework. I have a request: could you consider the microfrontend and the role of angular in it? I think this is a very relevant and interesting topic. For example, it confuses me that in the case of Angular you have to use a custom webpack configuration because it doesn’t seem like the authors themselves approve of this, otherwise they would have added such a feature to Angular themselves.

[@kaxoonyoe7346]

I think you are sitting in the deepest level of angular , very impressive!

[@adiscivgin]

Perfect explanation of something that is really needed for angular developers around the globe. Saw those mistakes everywhere. You rock, really.

[@AmarSingh-uw1db]

Gratitude for the knowledge ❤

[@headiezee1]

This is the best way to the show impact of rxjs mistakes and best practices: show code and results in dev tools

[@MrKOHKyPEHT]

Btw tap operator doesn't modify stream even if tap callback will accidentally return some value so +1 to safety side effects :D

[@DecodedFrontend]

Yes, that's true :) however, it is worth mentioning that you can mutate the object that “goes through” the tap operator. E.g tap(Val => Val.prop = “new value”) will cause that mutated object will go to the operator after the tap. So you have to be careful here 😉

[@premkrishnan9019]

Thanks for the clear explanations ❤

[@balakumar5681]

much needed, thanks!

[@juangoria3517]

Amazing video. There's always something to learn!!!

[@timurbirgalin4704]

A very interesting and usefule video! Some of these mistakes I'd made before and my coworkers explained me them. But now I have more systematic and deep understanding of all these bad patterns, so thank you so much:)

[@amaizingcode]

Great video! I hope you can share more tips like these. I think they can benefit the community a lot. Thanks!

[@FlorianBinder]

Thanks - I've learned a lot from this video!

[@justinryu9387]

Thank you very much for this video.

[@blueghost512]

Thank you bro. Although I stoped coding in Angular two years ago, such content still useful. specially for a NestJS dev

[@margaritashadurina3491]

Thank you for sharing useful videos!

[@VforVanish]

This was very interesting,thanks!

[@nelson3391]

Thanks a lot!

[@tz2014]

Awesome, it's a always brilliant to learn from you

[@igorparampam5984]

Great video!

[@ugochukwuumerie6378]

Awesome content. Thank you

[@andreifara9558]

Great content as always! Even experienced devs can learn something from these tips.

[@anandu06]

Great video ❤

[@StephenMoreira]

Great tips.

[@andrewparker7603]

Awesome video 👍

[@arthurfedotiew3609]

My top biggest mistake with rxjs in angular context for a long time was using it at places where it wasn't needed and not using it where it was.

[@alph_jvne]

My favorite coding content creator. Thanks, Dmytro!

[@goombagrenade]

Thanks for another great video!

[@LuizFMPaiva]

Amazing video. thanks Dmytro, u never disappoint ♥

[@Marlon-ly4ui]

Thank you @Decoded Frontend i think i have all of them more or less in my code , time for fixing!

[@osamaalnuimi4548]

Super Thank you 🎉

[@alexeyn2281]

Great video! Could you give advice how to prorerly split vendor file to chunks?

[@aresinodev]

Awesome 👏👏

[@Ivanco_step]

Grate vidio, thanks

[@tarquin161234]

Thanks

[@DecodedFrontend]

Thank you so much for your support 🚀 Much appreciate it 🙏🏻

[@balintcsaszar6831]

nice to mention that rxjs eslint rules are exist to prevent these mistakes 👍 and yes I know....I saw many project without proper eslint rule set, it is sad

[@sebastiangutierrezcorrea379]

Very good video! I learned a lot, your explanations are just clear and consise, thank so much for this content. Can you please make a video about i18n specially using @angular/localize, I haven't found a clear guide for the complete workflow (develop->extract->translate->merge) and loop again. How looks like this in an large/enterprise basecode, even the official docs are weak in this topic, how do Google use this in production, I will apreciate so much

[@deadlyecho]

Injecting the DestroyRef just to avoid init the subscription logic inside OnInit instead of the Constructor... Typical Angular.. I am like "Brother Ugh... Brother Ugh..." 😂😂

[@EmilioDegiovanni]

Great job Dmytro! RxJS is so big that every day I learn something new

[@DecodedFrontend]

That is true :) I am glad that you learned something new from the video 😊

[@tarquin161234]

Great video. However, in step 3 you suggest we use a signal but I still don't see what you gain from that. It's just more code.

[@diego_sabbagh]

Good job. I knew most of the things you explained (also cause I've already watched the other videos you referenced here) but I still have a tricky question: does async pipe unsubscribe from EVERY subscription in the chain? in your example at 9:30 does async pipe unsubscribe also from the valueChanges of searchConfigForm? doesnt it have a limited "range of action" as the takeUnitlDestroyed() ? thank you : )

[@PawelOlbrys99]

Should untilDestroyed(this) from the ngneat library also be used at the end of the pipe?

[@noob_dodger]

Thank you, Dmytro! I just started learning rxjs and angular and some things are not quite clear to me. For example, is it possible to avoid manual subscripting in components for POST requests using async pipe?

[@elmalleable]

i believe those unsubscribe after the call completes. I might be wrong but it should be in the docs somewhere

[@SamiullahKhan]

I see the nested observables is asked alot in interviews 😅. How the toSignal works here does it subscribes to observable and return new signal and unsubscribe on component destruction or does it create new signal on new emission, how does these things play out?

[@TheSysmat]

Nice, linter for take until

[@DecodedFrontend]

Yep 👍🏻

[@arthurfedotiew3609]

That was indeed a compendium of mistakes out in the wild, good job, Dima!) Regarding warming up observables, would you suggest using `shareReplay` or rather `share` with explicit configuration (connector, resetOn..., etc) to avoid misabiguity?

[@hengkeatyam3700]

For an RxJS expert, this is basic knowledge. For an RxJS beginner, it is damn complicated😅

[@tz2014]

Who else liked it before even watching the video thinking it's always quality content

[@IbrahimKwakuDuah]

I would have added all the code to the 'valueChange' in the example

[@hemanthkumarkakarla296]

Can we have a video enterprise project setup

[@SheriffZmroka]

Wow. I see good subtitles now)

[@DecodedFrontend]

Yes 👍🏻 the situation with subtitles will be getting better ;)

[@ExploringCodeCrafter]

Nothing learned, still a great Video for beginner🎉

[@exsitewebsolution6803]

6 out of 6😁. lots of code update to do.

[@MadarDoraeMon]

3:05 hey i have question , suppose there is a button , get data upon invoking these method we will call the rest api ! and get the data , here i am not waiting for the component to be destroyed , as soon as i got the response either sucess or anything i am unsubscribing the Subject, because it is no longer required , second time again new Subject will be created so if i am unsubscribing onDestroyed then i felt it is wrong , what if use clicked 10 times ! and we are holding the Subscription each time the Subscription will ovveride by new Subscriber , and in the end we are unsubscribing last Subscription , and remaining 9 will still bein the memory ! this is my research what your call on this !! ,

[@elmalleable]

not me writing a jotai clone using rxjs to avoid directly using rxjs directly, which supports observable composition, give it any two or more observables and provide a function that computes your derived observable, it handles all the headaches so you can just code instead of wondering is this hot, is this cold, did i unsubscribe, should i call this or that in the right order. why are we still dealing with raw rxjs at this point after it has been out for so long just like reduxToolkit takes the pain out of working with redux some already already made a rxjs lib that supporst composition. will probably edit this comment when i remember where i found it. anyone else thinking rxjs should have been simplified by now? like a library on top of rxjs that can catch these or provide simple constructs and pattern functions that should deal with most of these issues. rxjs has been around for far to be dealing with so many gotchas and edge cases.

[@Edgars82]

In mistake nr3 you did mistake. Should add sharereplay to observale if doing more than one async pipe to same observale. Edit. Ok in mistake nr4 you fixed mistake nr3 😅

[@doslass]

Неймовiрна англiйська!

[@etexalbania7301]

Why overcomplicate this basic filtering, when users can have a button and after btn click you call rxjx for filtering. This situation are no benefit for nobody, the user does not need real time filtering, he needs just filtering to work and to have correct results. Angular made things more difficult with this kind of examples they promoted with rxjs library

[@DecodedFrontend]

Hey 👋🏻 Thanks for your comment. The “overcomplicating“ you’re referring to, is actually a UX pattern, which doesn’t have any direct relation to Angular or RxJS. Those 2 are just tools that allow you to implement this particular behavior. If you need something simpler - just implement it. Angular doesn’t force any certain UX patterns.

[@etexalbania7301]

@@DecodedFrontend thank you for the reply, you did a great video, but we have also to consider the time that developers including you spent on studying rxjs operators for such behaviors, considering also the fact that it will become optional in angular rxjs library. So my point is why creating such UX patterns, rather than having all the parameters passed as a query string after a button click and get the results, that is what I meant by overcomplicating things, and I did not mean it for you personally but for the whole frontend ecosystem in general with this fancy filtering all over the js frameworks

[@anastasiia6513]

🥸😎🤓🥸😎🤓🥸😎🤓

[@bleed8028]

probably im wrong, but sometimes see something like this: stream$.pipe( ...any logic ).subscribe(value => this.subj$.next(value)) so, guys in my team often use useless subjects and move values from observables to subjects please let me know, if my comment is correct, im newbie in angular and feedback will be useful for me

[@volodymyrusarskyy6987]

It all depends on the code that you didn't provide. Technically proxy subjects are not required BUT there might be a case when a stream emits a value before a component can subscribe to it (for example, async pipe is not executed due to parent IF-statement being falsy), so the value is lost. Subscribing to a stream in a way you showed ensures that the value is preserved and can be used anytime. Without a context it is hard to say what is going on in your code and what was the original intention of your colleague.

[@PawelOlbrys99]

Should untilDestroyed(this) from the ngneat library also be used at the end of the pipe?

[@DecodedFrontend]

A quick check shows that this operator relays also on takeUntil - github.com/ngneat/until-destroy/blob/master/libs/until-destroy/src/lib/until-destroyed.ts#L61 So my assumption would be that untilDestroyed should be also placed in the end. However, I would recommend to double check it with the author of the library because I didn't work with this library before and I can miss something.