Change Detection in Angular - You Project Is 20x Slower!
Рет қаралды 67,786
Күн бұрынLearn change detection in Angular and improve performance of your Angular application. By default Angular check all properties in all components in every change detection cycle this is why it is extremely slow. You will learn how to optimize performance by using OnPush.
TIMESTAMPS
0:00 Introduction
0:54 Component rendering in Angular
2:34 Change detection in Angular
7:16 Input change in OnPush
10:23 Event change in OnPush
11:43 Streams change in OnPush
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...
RECOMMENDED VIDEOS
► My editor setup for web development - • Best Text Editor for W...
► Angular Tutorial for Beginners - • Angular Tutorial for B...
► Vue JS Crash Course - • Vue JS Crash Course fo...
► React Hooks Full Course - • React Hooks Tutorial f...
► Typescript Course for Beginners - • Typescript Crash Cours...
► Build a Todo App with Angular - • Build a Todo App With ...
► Creating custom select library - • Custom Javascript Drop...
► HTML Price comparison - • Practice CSS and HTML ...
► How to build Quiz with React hooks - • How to Build a Quiz Wi...
MY COURSES
► NestJS course - • Nest JS Project From S...
► Docker + Docker compose course - • Docker Compose Tutoria...
► Angular + NgRx course - • Angular Course 2021 - ...
► Vue + Vuex course - • Vue Course With Projec...
► React hooks course - • React Hooks tutorial b...
@andrewkolansky5348 Жыл бұрын
I've been doing Angular for 7 years and learned a lot from this video. There is just so much to know when it comes to Angular.
@MonsterlessonsAcademy Жыл бұрын
Yeap. The level of entrance is enormous.
@brianhuang5438 2 жыл бұрын
Simple and easy to understand! Gonna have to go through your channel and learn more, thanks!
@MonsterlessonsAcademy 2 жыл бұрын
Awesome, thank you!
@wolfisraging 2 жыл бұрын
Dude you're videos are gold. I've learned so much from them. Thanks a lot from the bottom of my heart! And plz keep making more :)
@MonsterlessonsAcademy 2 жыл бұрын
Glad you like them!
@metric152 Жыл бұрын
It's good that you pointed out "OnPush" as a change detection strategy but the issue here is calling a function in the middle of your template. You should only use functions when reacting to a DOM event like a button click or emit from another component. Pipes should be used in place of functions in a template to cache the result and only runs once.
@MonsterlessonsAcademy Жыл бұрын
I agree with you
@sanjvij896 Жыл бұрын
a very good video. I worked on angular for 2 years and somehow didn't knew about this issue until I started facing the slowness on one of the pages. Luckily we used clear subscription model on all pages with a central state so we didn't had much trouble with using change detection on push for main pages. Thanks this was great !
@MonsterlessonsAcademy Жыл бұрын
Glad it helped!
@kumarb. 10 ай бұрын
Thank you so much for this! I'm new to Angular and this video helped me quickly resolve a bug I've been working since 2 days. Cheers to you!
@MonsterlessonsAcademy 10 ай бұрын
Glad it helped!
@robaudenaerde1316 Жыл бұрын
Thanks. Very nice, clean and clear explanation!
@MonsterlessonsAcademy Жыл бұрын
Glad it was helpful!
@slowmoshotsPZ 9 ай бұрын
Crisp and Clear Explaination! Thank You
@MonsterlessonsAcademy 9 ай бұрын
Glad it was helpful!
@returncode0000 11 ай бұрын
Amazing content. I finally understood change detection. Thanks so much!
@MonsterlessonsAcademy 11 ай бұрын
Glad it helped!
@tuku_mann Жыл бұрын
The best and thorough explanation of the change detection, thank a lot!
@MonsterlessonsAcademy Жыл бұрын
Glad it was helpful!
@yevhen3934 2 жыл бұрын
Thanks for the detailed explanation!
@MonsterlessonsAcademy 2 жыл бұрын
My pleasure!
@reenezden 2 жыл бұрын
You are really good at explaining. Keep up with the good work
@MonsterlessonsAcademy 2 жыл бұрын
Thanks, will do!
@stefanitotokocopullo2739 2 жыл бұрын
Great video. Congratulations and thank you very much.
@MonsterlessonsAcademy 2 жыл бұрын
Thank you very much!
@radvilardian2238 Жыл бұрын
Thank God finally I found channel who is good in Angular, and write code using Vim. I ma hit that bell so hard
@collinsk8754 Жыл бұрын
Very well explained! Thanks.
@MonsterlessonsAcademy Жыл бұрын
Glad it was helpful!
@SergiyKukharchuk-of9us 3 ай бұрын
Really, the best angular helper
@MonsterlessonsAcademy 3 ай бұрын
Thanks!
@simonneubauer2369 2 жыл бұрын
Super video, thank you very much !!! Especially the part with OnPush and the trick with the "checkRender"-Method, i found no other tutorial / answer on stackoverflow, because with OnPush, the ngDoCheck lifecycle hook is still called, but the html is not rendered again, if there is no change. Furthermore i finally understood the ...-spread operator, and the importance of immutability.
@MonsterlessonsAcademy 2 жыл бұрын
You're welcome! I searched really long for checkRender as I wanted to really see how many times html is rendered. Dunno why people don't look for it. In React we get it out of the box...
@manitshetty 2 жыл бұрын
What an amazing video. Thanks a lot!
@MonsterlessonsAcademy 2 жыл бұрын
Glad you liked it!
@veronikas.1347 9 ай бұрын
It was helpful! Thank you
@MonsterlessonsAcademy 9 ай бұрын
You're welcome!
@dhaneshdhanawade 10 ай бұрын
I love your channel when I watch your videos I learn new things every time.
@MonsterlessonsAcademy 10 ай бұрын
Happy to hear that!
@costagmc1 Жыл бұрын
Nice explanation! Thank you
@MonsterlessonsAcademy Жыл бұрын
You are welcome!
@davidmatossalvador2036 2 жыл бұрын
I love this video it's great your way of explaining this concept
@MonsterlessonsAcademy 2 жыл бұрын
Glad to hear that!
@sowmithreddy18 Жыл бұрын
Superb explanation 👍🏻
@MonsterlessonsAcademy Жыл бұрын
Thank you 🙂
@alimirazimzadeh544 Жыл бұрын
nice topic and nice explanation
@MonsterlessonsAcademy Жыл бұрын
Thanks a lot!
@ibrahimelheta6134 2 жыл бұрын
keep it up u r insanlly good 💜
@MonsterlessonsAcademy 2 жыл бұрын
Thank you, I will
@manishkrai Жыл бұрын
Good Explaination!
@MonsterlessonsAcademy Жыл бұрын
Thanks!
@TheMarkBrut 9 ай бұрын
Very nice!
@MonsterlessonsAcademy 9 ай бұрын
Thanks!
@josephmbimbi Ай бұрын
Thanks for the video, I'm a backend dev who is getting started in frontend dev, i did a bit of vanilla JS back in like 2013, but i figured i may as well jump right into Angular. I was pulling my hair and getting very frustrated with the UI not updating, backend unexpectedly being called multiple times. The barrier to entry to do proper dev is higher than i expected, like any framework, it hides a bunch of complexity, but the intrinsic complexity just cannot vanish. However I understand that when you grok it, you get much more done than using vanilla JS or TS.
@MonsterlessonsAcademy Ай бұрын
Yeap
@lahcencodery Жыл бұрын
great video!!
@MonsterlessonsAcademy Жыл бұрын
Glad you liked it!
@yashwantraghuwanshi982 Жыл бұрын
Great video man!! Can you post more advanced angular concepts ?? Thanks
@MonsterlessonsAcademy Жыл бұрын
Thank you! I will add the idea to the list of future videos.
@hamza201183 2 жыл бұрын
Many thanks 👍
@MonsterlessonsAcademy 2 жыл бұрын
Welcome 👍
@igork555 2 жыл бұрын
Change detection in Angular highly optimized and for the most apps it is not necessary to use OnPush, unless you have a very lot of components simultaneously on one page. And again, when Angular runs change detection - it's just about checking objects in memory, not re-renrdering, so in most cases it really fast (1-2 ms). Rendering process in browser will be run only if something changed. Using OnPush require you to waste more time while developing. You have to use immutable objects, run change detection manually when you need. It's not so hard, but it is extra job. So, for many projects, this is a premature optimization, which is a bad practice.
@MonsterlessonsAcademy 2 жыл бұрын
You are totally right this is why in small Angular projects on youtube and even in my Angular course I didn't use onPush. But for any big projects it's a must imho.
@igork555 2 жыл бұрын
@@MonsterlessonsAcademy The main thing here is not the size of the project, but the size of each individual page. If your project has hundreds of different pages, this is a very large project. But if, on average, you have only a dozen components on each opened page, then what's the difference how many components there are in total the project. The Chnage Detection will always check only those components that are currently in the component tree.
@MonsterlessonsAcademy 2 жыл бұрын
@@igork555 Yes of course but I never met "simple" big projects. Normally it's some performance things were each ms of calculations matter. For "just pages" we probably don't need spa at all.
@Lordzeus86 2 жыл бұрын
@@MonsterlessonsAcademy On top of that, accepted performance is what really matters. Plenty of companies derive value from the speed of development and ease of change rather than the perception of slowness. We all want things to be fast but if the users don't care/can't even see the difference then I'd rather have simpler code
@Elyrinnnn 11 ай бұрын
great video! what I was missing is what happens if you subscribe without async pipe. one could mention that you have to inject "ChangeDetectorRef" and call its "markForCheck()" to mimic the behaviour of the async pipe. Also I find Angulars name "OnPush" a bit confusing. if i'm not mistaken it does not affect the amount of change detection runs. But it can make each run more light weight by telling angular: "hey, you can skip my component and its children in your current cd-cycle". That you have proven in your example where ngzone events still trigger CD despite OnPush. Awesome Content
@MonsterlessonsAcademy 11 ай бұрын
Yes OnPush doesn't skip the digest cycle. It is kind of hack as the whole digest cycle doesn't know what was changed and what to check.
@valikonen 2 жыл бұрын
Masterpice! Also I enjoy of react in udemy.
@MonsterlessonsAcademy 2 жыл бұрын
I'm happy to hear that!
@delliraz815 2 жыл бұрын
Spasibo
@snansahmarov1524 2 жыл бұрын
Thank you
@MonsterlessonsAcademy 2 жыл бұрын
You're welcome!
@drumdude9403 Жыл бұрын
Thanks! Your videos are so incredibly helpful
@MonsterlessonsAcademy Жыл бұрын
Thank you so much for your support! It means a lot to me.
@cdoreoff98 Жыл бұрын
good stuff!!! but i miss the comparison of performance or explanations when to use async and when change detection push. thank you in advance!
@MonsterlessonsAcademy Жыл бұрын
This are 2 different things which are not related to each other. You should use both.
@cloud_architector 2 жыл бұрын
thanks 😀
@MonsterlessonsAcademy 2 жыл бұрын
You're welcome!
@cristobalcanas5189 29 күн бұрын
You are the best!!! Any webpage to buy your course?
@MonsterlessonsAcademy 29 күн бұрын
Thanks. monsterlessons-academy.com/courses
@vvsraju04 2 жыл бұрын
Great video. have question about the "time now " mentioned at 4:30 . Couldn't understand the point. could you elaborate?
@MonsterlessonsAcademy 2 жыл бұрын
Calling a function to return a date or time at the moment of the call will always return a new date which is always unique and every single comparison will be different. The same is valid for Math.random.
@jeannuel 2 жыл бұрын
This also tells me that there's nothing wrong by executing a function in the template if you're using onPush and you know what are you doing, am I right? Cuz I saw a lot of articles that say that Angular will re-execute the function because of the re-renders but they don't know why the Angular component re-renders so much. Excellent video. Best explanation of this that I found.
@MonsterlessonsAcademy 2 жыл бұрын
There is nothing wrong to do anything if you know what you are doing :) I still try to avoid calling functions in template directly but it is not always possible.
@abdulnafay72 Жыл бұрын
@@MonsterlessonsAcademy can you give example what is executing function in the middle of template
@dinysanchez Жыл бұрын
Wow thanks this is one of those rare topics! So glad you made it available on KZfaq. One question, I've tried in in my own application and I realised when I applied the change detection strategy on app.component it works for all the nested components which does not require me to implement it on all the other components. Is the right way to do it? Or should we implement on selective components? Thanks!
@MonsterlessonsAcademy Жыл бұрын
Hi it is not. You need to write OnPush in every component. If you enable angular linting rules for your project you will get this error in every single component.
@dinysanchez Жыл бұрын
@@MonsterlessonsAcademy Thanks for the prompt reply; I have bought your Monster Lesson - Angular and NgRx - Building Real Project From Scratch, and I've realized that you did not implement the change detection in the lesson. I there a use case where change detection is not necessary, or it a best practice to complement it on every component? Thank you so much for your guidance. Cheers!
@MonsterlessonsAcademy Жыл бұрын
@@dinysanchez there are 2 possible ways. Some people like to write push in every component from the start and some people like to start optimizing if we have performance problems. If the whole app is not slow then I won't optimize it.
@dinysanchez Жыл бұрын
@@MonsterlessonsAcademy Noted. Thank you for your insight. I do enjoy you Angular tutorial please make more especially on Angular Reactive Forms. Cheers!
@gkfunday7649 Жыл бұрын
soft is rather complex.. sotNice tutorialngs more than they should be. But you've made a great job explaining it!
@MonsterlessonsAcademy Жыл бұрын
Glad it was helpful!
@tigranharutyunyan7674 Жыл бұрын
That is why Computed properties in Vue are so valuable
@MonsterlessonsAcademy Жыл бұрын
Yes exactly. Thats why I'm a huge fan of computed properties in any framework.
@CodingAbroad Жыл бұрын
Is it true you can just put the onPush in your main app.component file and it cascades down to all other components? Or would I have to put on it on manually to each component separately?
@MonsterlessonsAcademy Жыл бұрын
OnPush means that change detection won't run for a component if its inputs don't change. The fact that CD is not run for children is a side-effect, because CD is not run for a parent, it's not executed for children. But if you have CD executed for a parent, it will run for it's children, unless they are also OnPush
@mezzanine74 2 жыл бұрын
Good explanation. Can we simply assume that better all child components which has input decorator must rely on OnPush strategy? It takes more time as we should use immutable operations but it will increase performance as project grows.
@MonsterlessonsAcademy 2 жыл бұрын
Yes, I typically do all components in the app with OnPush
@mezzanine74 2 жыл бұрын
Thank you. This is good to know.
@debuggerval Жыл бұрын
I'm using trackbyFn for ngfors because only its changing the row of change row. What do you think about the trackbyfn for performance?
@MonsterlessonsAcademy Жыл бұрын
It is recommended to use trackBy always in any case. This is why it is a recommended rule in all linters.
@frontend3409 Жыл бұрын
I didn't expect the definition of OnPush strategy on your channel. Good work! But i'm confused about this. So, when object is passing down through change detection hierarchy (from parent to child, from list of todos to todo) default behaviour is that it passes objects via references. And when those references are passed it'll update those variables. Every time when object passing down through @Input will be updated. That is the default behaviour. Now, if we change to OnPush Strategy then object passed by reference won't be updated on the view and we have to copy them. And, if we copy them, it will takes more space in the memory! So how it is helpful with performance? From my point of view, the application will be slower, because of browser will take more space to work. What am i missing? :D Also, i don't like that i need to manually copy those objects (but that is my preference, not performance thing per se ) for every @Input() value. Um, maybe there are some decorators which are handling that copying so the developer doesn't take care about using rest operator or Object.assign to make deep copy of the object. That would be helpful. But i didn't heard anything about it, since few years, so it seems impossible to achieve that. I wonder why...
@MonsterlessonsAcademy Жыл бұрын
Making JS copies is not that expensive and Javascript is fast. Making checks for changes and rerendering DOM is slow and takes time and performance. Realistically mutability is bad for debugging, code safety etc. I recommend everybody to learn how to write pure, functional code as it improves all this things significantly.
@paresseux88 Жыл бұрын
Good explanation but what’s missing here ist changing non-input values. Common use case where you have to use ChangeDetectorRef
@MonsterlessonsAcademy Жыл бұрын
I'm not sure what to explain here. Every time when you want change detection but it was not triggered because of onPush you write cdr.detectChanges()
@shimeo7321 Жыл бұрын
Why onPush stategy is not default? I read several articles and still I don't know. Haven't found valueable answer yet. If onPush is not default is it has some drawbacks?
@MonsterlessonsAcademy Жыл бұрын
That's a great question. I would like to see it by default or at least configurable globally. The only way is to configure eslint to show warnings if you don't write it. I think it is not by default so as people must understand more about how things are working. With Angular default behaivour it just rerenders every time and works.
@madig4792 Жыл бұрын
Hi, thanks a lot for your video. I need to optimize my angular app, so I want to reduce chenge detection cycles. Is there a way to track components/views that trigger change detection? I tried with Angular DevTools of Chrome, but it is not detailed
@MonsterlessonsAcademy Жыл бұрын
Not that I know of. I typically do that manually for every component.
@deefdragon Жыл бұрын
I enjoyed the material, but I will say that the terminal editor made it harder for me to follow what file you were working on and why.
@MonsterlessonsAcademy Жыл бұрын
There is a file name at the bottom left and there is source code in the description that you can check.
@moryaffe7595 6 ай бұрын
Do you think the onPush Strategy is till relevant after signals are out?
@MonsterlessonsAcademy 6 ай бұрын
If you use just signals no. If you use streams yes
@moryaffe7595 6 ай бұрын
@@MonsterlessonsAcademy make sense :) Thanks for the answer.
@anutaNYC 4 ай бұрын
How to fix detection change happened before the value changed?! I hate this error
@MonsterlessonsAcademy 4 ай бұрын
Debug why your value changed when Angular checks it immediately after first check. It's typically a bug on your side.
@CharliesName 9 ай бұрын
Did some changes to a app that handles 5 editable tables simultaneously. Changed most components to OnPush and changed function calls to pipes or in some cases to a precalculated value in vm, it was a massive performance upgrade. Previously it had a function that change style of each editable cell which was called 3500 times every time anything changed with a table of only 30 rows! Now it's barely called at all. What i didn't know from this video is that async work with OnPush! Will be looking into using that more. Thanks for a awesome video!
@MonsterlessonsAcademy 9 ай бұрын
Glad to hear that!
@sohaibkamran2735 Жыл бұрын
for change detection error I mostly use observable so angular dont give errors
@MonsterlessonsAcademy Жыл бұрын
This is a nice way as you can fully define how you cache property and when change should be triggered.
@IgorKravets81 Жыл бұрын
The one example is missing: subscribing to observable in onInit and setting component variable and then using it in template
@MonsterlessonsAcademy Жыл бұрын
But it doesn't solve anything. You still create a subscription and you must unsubscribe later.
@IgorKravets81 Жыл бұрын
@@MonsterlessonsAcademy what I meant it would have been logical part of the topic to consider. Since almost every arrangement of using reactive variables is shown - that one is missing. What would happen then? Is it the exactly the same as async pipe? Not obvious for a beginner
@frontend3409 Жыл бұрын
I assume that the '20x' is a synonim to 'a lot'?
@MonsterlessonsAcademy Жыл бұрын
Yeap
@ssr7305 Жыл бұрын
Hey Michael, thanks for tNice tutorials, I want to make a one off donation to you - give the details
@michaelkorn803 4 ай бұрын
How do you know it's 20 times faster? How can you quantify the amount of time not having so many change cycles has?
@MonsterlessonsAcademy 4 ай бұрын
It's a clickbaity title. But you can profile your app with chrome performance tools.
@LarsRyeJeppesen Жыл бұрын
Signals, baby
@MonsterlessonsAcademy Жыл бұрын
Yeap
@thirumanitheivarajan7295 2 жыл бұрын
1) ExpressionChangedAfterItHasBeenCheckedError error won't affect in PROD, right? So Can I skip the error in DEV also even it throws in console? 2) why the Angular again check the Change Detection 2nd time in DEV mode? 3) why the Angular doesn't check the Change Detection 2nd time in PROD mode?
@MonsterlessonsAcademy 2 жыл бұрын
1. Yes it's in dev only. The error says that you have a problem in your application. I would better fix it :) 2. to be sure that things don't change. With math.random or time.now they will change for example 3. because it's a dev tool to find bugs in your application.
@thirumanitheivarajan7295 2 жыл бұрын
@@MonsterlessonsAcademy Thanks for trying to help me out to clear the clouds. :) 1. Partially agreed, bcoz, it's displaying the updated values in view(It's my need), even it throws the error. 2. I don't agree: What's the problem for Angular if the value is changing once it's checked. Why it's allowing if I add cdf.detectChanges() or settimeout(). Why I shouldn't update values in ngAfterViewInit() & ngOnChanges(), what's the purpose actually to not do in the both lifecycles? 3. AGREED.
@MonsterlessonsAcademy 2 жыл бұрын
@ThiruMani Theivarajan I didn't say that you should not use ngAfterViewInit or ngOnChanges. But all times when angular screamed about this error it was my architectural fault and not angular. I use both ngAfterViewInit or ngOnChanges without triggering this error.
@thirumanitheivarajan7295 2 жыл бұрын
@@MonsterlessonsAcademy Hi, I'm questioning against Angular only not at you, please do not mistake me, you are one of my best guider. And I'm getting confused about the purpose only. So it's Angular architectural fault, so they provided the workaround with the changeDetectorRef, settimeout. Right?
@MonsterlessonsAcademy 2 жыл бұрын
No worries. It's difficult to offence me :) I don't think it's Angular architectural fault but it's a notification that you do something incorrect with the way how angular works. You might see it like a framework fault but it's the way how it was intended to be built. setTimeout looks for sure like a hack for me. But changeDetectorRef is a way to manually trigger detection changes of the framework.
@ahmadbenchakhtir5787 Жыл бұрын
i think that the signals have solved this easily.
@MonsterlessonsAcademy Жыл бұрын
Yes exactly this is why starting from ng16 it makes a lot of sense to use them.
@ahmadbenchakhtir5787 Жыл бұрын
@@MonsterlessonsAcademy yeeeh, you are a good searcher . search about islam religion ❤️.
@JoshDeveloper 2 жыл бұрын
Yaaay, I found non-indian guy's video about change-detection.... :D
@MonsterlessonsAcademy 2 жыл бұрын
That means indian guys are doing a better job :D
@sportscompilation2218 2 жыл бұрын
@@MonsterlessonsAcademy they are not that better. Only with basic things. For Advance Concepts Western People are good
@webcreative70 Жыл бұрын
@@sportscompilation2218 i Agee
@HuneSilver 7 ай бұрын
please, is posible to add subtitles in english to your videos, i don't understand very well your english 🙂
@MonsterlessonsAcademy 7 ай бұрын
Unfortunately not as I don't create subtitles by hands.
@a.yashwanth Жыл бұрын
Shouldn't the title say Your project instead of You project?
@MonsterlessonsAcademy Жыл бұрын
Yeap. Missed the letter
@ChessPuzzlesVideo Жыл бұрын
Nice explanation. When should we use markForCheck and detectChanges method?
@MonsterlessonsAcademy Жыл бұрын
markForCheck marks it for the next digest cycle and detectChanges triggers digest cycle.
@carlossolrac84 8 күн бұрын
it is a shame i cant add this video to my favorite's list. idk why youtube marks these videos as 'for kids', which removes this feature.
@MonsterlessonsAcademy 8 күн бұрын
Strange. It shows "not for kids' when I'm editing the video.
@BrockFredin 2 жыл бұрын
Slow down and pace yourself. You're talking way too fast. You should also quickly introduce yourself in all videos.
Kirill Multitool
Рет қаралды 40 МЛН
Monsterlessons Academy
Рет қаралды 32 М.
Development Scientist
Рет қаралды 20
Monsterlessons Academy
Рет қаралды 2,7 М.
Fun Of Heuristic
Рет қаралды 2,9 М.
Monsterlessons Academy
Рет қаралды 30 М.