TOP 6 Mistakes in RxJS code

[@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?

[@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 😊

[@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 😄

[@developmentroselino]

@@DecodedFrontend then tell us the truth

[@DecodedFrontend]

@@developmentroselino the truth is that I am a regular developer who doesn't know everything about Angular, still has to constantly learn and especially from Angular framework creators 😉

[@developmentroselino]

@@DecodedFrontend what a wise words, i just learning angular moving from .net webforms. thank you for the spirit of learning

[@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.

[@adiscivgin]

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

[@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 😉

[@Kobe24Geo]

Can you make a video about good and bad practices generally in Angular? For templates as well as ts component logics

[@eXpertise7]

You're really good. This is gold. Coming from Angular Dev with 6 year experience.

[@IhorKalchenko]

great examples, that meet so many times on the projects. thanks

[@pazzuto]

Been using Angular for a few years and I still learn things from you. Great video as always!

[@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!

[@tarquin161234]

Thanks

[@DecodedFrontend]

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

[@AmarSingh-uw1db]

Gratitude for the knowledge ❤

[@juancarlosfigueroa617]

Hey Dmytro, great video really enjoyed to realize a couple of concepts I didn't had fresh on my mind, About point number 6 I think that's why is important to know at least thebasics of functional programming, implementing pure functions whenever possible, immutability for parameters and external global class properties is a great nice to have in your toolbelt of programming concepts to master, In addition to that the RxJS operators implement really well function composition so having those before a subscription happens and do all sorts of operations before the UI interacts with it makes it beautiful but of course with pitfalls like the takeUntilDestroyed and the side effects catching strategy, the cherry on top in newest angular versions it's to be able to do all of this operations and then jus translate it to a signal using "toSignal". Thanks for sharing your knowledge sir, happy coding!.

[@alph_jvne]

My favorite coding content creator. Thanks, Dmytro!

[@stanislautsishkou5632]

Thanks for the perfect topic you've covered! Would like to add that do not recommend to use 'tap' operator at all, because it is always a side effect that even impossible to control. Such operator must be banned by the rules. All side effects have to be well-described as a part of behaviour, by creating the additional subscriptions that you could remove, add, event turn on-off by some condition.

[@NPiki]

Thank you! Great video

[@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?

[@tobalhenriquez8233]

What a great video!! Thanks for this. I think you can get even to more people with this begginer aproach!!

[@mhadi-dev]

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

[@orz5516]

common mistakes: 1. Subscriptions inside functions that triggers multiple times (through DOM events like click, hover etc...). 2. Creating multiple subscriptions inside angular life cycle hooks when the observable results are dependent on one another and thus creating race conditions.

[@alexeyn2281]

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

[@pierajzan]

I would love to see more angular "mistakes" videos. Through your experience you have seen many bad practices and can explain why they are bad. I hope for such videos :)

[@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:)

[@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

[@amaizingcode]

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

[@nelson3391]

Thanks a lot!

[@LuizFMPaiva]

Amazing video. thanks Dmytro, u never disappoint ♥

[@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.

[@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 : )

[@FlorianBinder]

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

[@andreifara9558]

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

[@nickolaizein7465]

Thanks you, very nice!

[@theanswer1993]

First time that I knew all the things you mentioned in the video. Kind of proud of myself 😂 Great video!

[@NigelStepney]

More like this, please!!!

[@Marlon-ly4ui]

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

[@balakumar5681]

much needed, thanks!

[@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

[@premkrishnan9019]

Thanks for the clear explanations ❤

[@PawelOlbrys99]

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

[@tz2014]

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

[@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 😊

[@juangoria3517]

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

[@justinryu9387]

Thank you very much for this video.

[@TheSysmat]

Nice, linter for take until

[@DecodedFrontend]

Yep 👍🏻

[@VforVanish]

This was very interesting,thanks!

[@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?

[@goombagrenade]

Thanks for another great 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.

[@ugochukwuumerie6378]

Awesome content. Thank you

[@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

[@timurmartinez4093]

Thanks for the content. What is your nationality?

[@DecodedFrontend]

You are welcome. I am a Ukrainian.

[@igorparampam5984]

Great video!

[@andrewparker7603]

Awesome video 👍

[@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..." 😂😂

[@StephenMoreira]

Great tips.

[@hengkeatyam3700]

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

[@Ghost2012qte]

Amazing

[@tz2014]

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

[@ExploringCodeCrafter]

Nothing learned, still a great Video for beginner🎉

[@ivanco_s]

Grate vidio, thanks

[@osamaalnuimi4548]

Super Thank you 🎉

[@INDUSTRYIND1]

Can we have a video enterprise project setup

[@lsak9703]

Здравствуйте! Вы в Австрии живете?

[@DecodedFrontend]

Здравствуйте! Да

[@khoaanh348]

ur content is very very hepfuylly

[@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 !! ,

[@aresinodev]

Awesome 👏👏

[@IbrahimKwakuDuah]

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

[@exsitewebsolution6803]

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

[@HuyLe-zx8ko]

awesome

[@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.

[@headiezee1]

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

[@amrelsher4746]

wow🥰

[@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 😅

[@LuciusFrederica]

Hall Larry Garcia Mark Young Deborah

[@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.

[@anandu06]

Great video ❤