Pitfalls Of Using takeUntil and takeUntilDestroyed RxJS Operators

[@DecodedFrontend]

From community: There is an eslint rule that helps to avoid the pitfalls I mentioned - github.com/cartant/rxjs-tslint-rules#rxjs-no-unsafe-takeuntil 💥 Become a PRO with my in-depth Angular Forms Course💥 🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted 💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

[@halgaska]

I love how you explain things while showing the actual implementation in the Angular source code. I am glad you have decided to create Angular content :)

[@ommo289]

The presentation of the memory leak is awesome! Thank you for the video

[@innocentmazando3808]

Thanks for this one. Really educational and you just answered an issue I once had last month.

[@DecodedFrontend]

Thank you for your feedback. I wish I released the video earlier :) However, it will help others to save a lot time of in debugging such stuff.

[@hiteshsuthar1097]

Thanks! You boosted my angular knowledge dramatically 😅

[@blokche_dev]

As always, valuable content. Thanks for sharing!

[@danijelanikitin4727]

Thank you very much for this one! 1h ago was googling is switchMap auto unsubscribed when have takeUntil and now you posted this 😂 Great explanation! 🎉

[@DecodedFrontend]

You are welcome :) Thanks for your feedback!

[@AntonioSantana-ll8il]

I love the way you explain things! greetings for Colombia!

[@zoxx972]

Thanks Sir, always learning something new here, nice and clean!!! Do you have some videos talking about the best way to structure a complex Angular project? When to use container components, presentational components pattern, use of a state management with the use of a facade service, maybe some NX style project structure also? I always find it hard to find ressource about it except having the ability to have access to a large production app. Anyway all the best, Thanks you!

[@GuillermoArellano]

Incredibly valuable information. Thank you for keeping the video under 15 minutes.

[@Sevkingblade]

As always awesome information!!

[@claudiuciprianbetiuc3985]

As always, clear explanations 😊 thanks!

[@dadadodo123]

Thank you so much, it was really helpful!

[@JuliaSleeps]

“ but is there a even a better way?” I truly thought that you will say “no”))) thank you for the video

[@DecodedFrontend]

How unpredictable am I haha 😂 thanks for the comment 😊

[@MelroyvandenBerg]

Thanks very useful!!

[@hugofilipeseleiro]

Thank you.

[@danielvega646]

Now this is high quality angular's content.

[@kaeltas00]

Awesome thanks!

[@NavidBahrami7]

Tanks a lot 🎉

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro) What about until-destroy Library?

[@DecodedFrontend]

Same thing there :) They also use takeUntil operator under the hood.

[@azeemjoseph3946]

Great as always thank you

[@happen_9616]

Perfect, thanks

[@ilyabielov9864]

Як завжди🔥

[@Perun42]

Thank you, for your videos!

[@vaidasmasys3764]

Great video. Thanks :)

[@sebastienbruno5565]

Thanks for the content (useful as usual) :)

[@unalkyl5857]

With takeuntilDestroyed, i am getting the issue NG0911: View has already been destroyed Is there any Solution for that?

[@AleksandraSetsumei]

thank you so much for your videos, it feels like they make me a better and more undarstanding software developer :)

[@Doktornikita]

Thanks!

[@zrowork198]

Great video. Thank you. You made me laugh with parrot 😄

[@michaldevpl]

Great as always. Please consider putting code example next time! Cheers :)

[@DecodedFrontend]

Hey :) thank you! Could you please clarify what exactly do you mean by “putting code examples”? Thank you :)

[@michaldevpl]

@@DecodedFrontend for example 2:54 - it would be cool to put this example in stackblitz so I (we) can play with this code :) Or maybe I'm the one who want to test it by myself :D

[@DecodedFrontend]

@@michaldevpl aha, that's what you mean. Ok, I will maybe add either a Stackblitz or a link to the GitHub repo ;)

[@michaldevpl]

@@DecodedFrontend No worries :) Just consider it during next video! Happy weekend!

[@youknowwho4994]

Great Channel for Angular Content. Do you have any plans to cover "Directive Composition API"?. Thanks in advance.

[@devman5813]

thank you

[@RahulPatel-kw3bp]

What order should `catchError` and `finalize` operators be used vs `takeUntil`?

[@unknown6535]

do you have a video on when the ngOnDestroy method is automatically called in services and when it will be ignored?

[@nikachkhobadze7710]

What about ngNeat solution untilDestroyed?

[@DecodedFrontend]

As far as I remember, untilDestroyed from ngNeat uses the same strategy with takeUntil + Subject. So I would say that this rule is applicable to that operator as well. Nevertheless, I would reach the author of the library and ask him to 100% sure.

[@nikachkhobadze7710]

@@DecodedFrontend thank you for your feedback!

[@paulh6933]

Could you expound on how you see the memory leak? Or are you determining this because you still see the polling logs in the console? The bird was exceptionally funny!

[@rkrao8582]

What Happens with CatchError inside the pipeline? Should I use takeUntilDestroyed before the CatchError or after?

[@lucasmello1901]

I have a question regarding the valueChanges of the form. Do I need to unsubscribe from it?

[@Aliakbaresmaeiliiii]

I really appreciate of y for create nice video

[@deluxe9490]

Amazing video thank you so much, I've been using takeUntil(destroyed$) opreator and never felt that there might be memory leaks I thought it was doing great job. nice video I think you saved so much person's time. keep going ❤

[@DaoSeeker]

Two Questions: 1. If you don't subscribe to the Observable do you even need to unsubscribe or use takeUntil()? 1a. I assume If you don't subscribe() to an Observable, but use the Observable in Angular HTML, that's still technically having the HTML subscribe to it? 2. If the takeUntil() is used after a filter() but the filter() never passes/emits, is there potential for leaks still?

[@haroldpepete]

i look forrward to seeing a singal video on DECODED FRONTEND style, i mean, master style

[@SwamiSanapathi]

Fantastic video 😍😍 Have a doubt.. I have a project with hundreds of components, and each component can have its own service. These services handle the business logic for fetching data from the backend. The response from the API calls is then shared with the component's template and rendered on the UI. I would like to know if unsubscribing from API call responses made using the Angular HTTP module is necessary in this scenario. btw I am not using async pipe.

[@olivierboisse1678]

4:00 Your assumption is wrong, you can perfectly declare takeUntil operator after min, max, count, last. Here is an example which doesn't print anything due to the takeUntil method : const subject = new Subject(); setTimeout(() => subject.next(null), 500); of(1, 2) .pipe( concatMap((n) => of(n).pipe(delay(1000))), last(), takeUntil(subject) ) .subscribe(console.log);

[@christianaustria741]

For operators such as share or shareReplay, should they go after takeUntil or similar methods?

[@aram5642]

Yeah, async pipe is a decent way of unsubscribing, but still - it has this awful thing to it that the first "emission" is null, so it requires a lot of guards around the values to satisfy strict template checks

[@DecodedFrontend]

Eventually, all the approaches have tradeoffs. I forgot to mention in the video but the toSignal also has some drawbacks, for example, since it uses inject() under the hood, it means that you can use it only either in the constructor context, the context of injector, or provide injector explicitly :)

[@aram5642]

@@DecodedFrontend Yes, Manfred had a great talk about it recently. But I am not reaching that far, as my projects are still pre-16. And also, singal won't be able to replace all rxjs, so one still needs to know the "old school" ways :)

[@Aliakbaresmaeiliiii]

*I really appreciate of y for create nice video *

[@twoonetwo7751]

there is a typo in your video thumbnail

[@DecodedFrontend]

Oh, indeed. Thank you, I will fix it :)

[@ÁlvaroMartínezMartínez-z9l]

Nice video. However I don't quite see how toSignal avoids one of the pitfalls you mention in kzbin.info/www/bejne/m3vWZXiAirShhKc. AFAIK toSignal needs to either run in injection context or you need to manually pass it the Injector, so how could you leverage this in a method, for instance?

[@DecodedFrontend]

Hi :) Yeah... well... I was already getting this question and it is my bad that I forgot to mention about disadvantages of using toSignal as well. Indeed, it has a limitation that you have mentioned which might be very inconvenient when you observable rely on some data from e.g. @Input(). My motivation to claim that 'toSignal' is better than the async pipe was the following: 1. No need to import any dependencies like (AsyncPipe) 2. Broader usage. It can be used in services, directives, etc when async pipe can be used only in components/templates. 3. Compatible with the future ZoneLess concept which is based on signals. Maybe the ASYNC pipe will be adjusted to work with Zoneless apps too but at this time I don't have such information. But of course, toSignal has disadvantages like: 1. can be used only in the injection/constructror context. 2. toSignal subscribes immediately to observable which is... not necessarily a disadvantage but just a thing to keep in mind.

[@vadimshuplov6849]

Very strange behavior. May be issue was with PollingService instances? Because, usually SwitchMap of course is auto unsubscribing if parent subscription was canceled, even if takeUntill stands before switchMap operator.

[@piotrbrokowski4703]

what happened after takeUntil stays after takeuntil

[@NN-it2vm]

Сигналы имба)

[@MagicPepe97]

i think the best way is takeUntilDestroyed

[@DecodedFrontend]

Great option too :)

[@MagicPepe97]

@@DecodedFrontend toSignal is too new

[@DecodedFrontend]

@@MagicPepe97 yep, that’s true. Hopefully, since Angular 17 it becomes stable and we can safely use it.

[@Bukratusi]

bro please make videos more frequently. please. you tell what others donot and very few videos there. :(

[@roman.kamlykov]

Can I do this? ngOnDestroy() { Object.values(this).forEach(value => { if (value instanceof Subscription) { value.unsubscribe(); } }); }

[@yuriinadilnyi3029]

one more new thing in arsenal) thx a lot

[@TayambaMwanza]

I unsubscribe by clicking the small unsubscribe button in my emails 😂

[@DecodedFrontend]

Or on KZbin channel 😬 Hopefully not :)

[@TayambaMwanza]

@@DecodedFrontend haha, no I have subscribed to you, good content

[@nourashraf7723]

I think the order of takeUntilDestroyed doesn't matter anymore, no?

[@DecodedFrontend]

It matters. takeUntilDestroyed uses the same takeUntil + subject pattern under the hood.

[@KarthikeyanMlp]

I subscribed your channel and then after watching this video unsubscribed as you suggested to avoid memory leaks 😂😜

[@EtoBARAKUDAvasa]

It's 1st what you must learn before use RxJs! Signals for lazy developers )))

[@DecodedFrontend]

Signals for cowards!😅

[@jseh_]

Wtf? 😂

[@chewygaming1]

thank you!