From Good to Great: Optimizing Angular Performance

► 🔥 Get my Advanced Courses Here ➡️ monsterlessons-academy.com/co...
In this video, we delve into optimizing Angular performance by examining how components are rendered and how often. Learn the impact of OnPush change detection strategy and the Track By function on your app's efficiency. We also highlight common pitfalls to avoid. Perfect for Angular developers aiming to boost their application's performance!
This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.
LOOKING FOR THE VIDEO EDITOR? ➡️ [e-mail]
SERVICES THAT I'M USING
Backblaze unlimited cloud backup ➡️ www.backblaze.com/cloud-backu...
Free 1 Month Skillshare Membership ➡️ skillshare.eqcm.net/c/5473521...
STUFF I USE
► My imac for home on Amazon - amzn.to/4aLbTBu
► Mac macbook to go on Amazon - amzn.to/4bRVD2m
► My monitors on Amazon - amzn.to/3yEafUQ
► My mouse on Amazon - amzn.to/4ayzXHn
► My keyboard on Amazon - amzn.to/3KkyGZQ
► My monitor arm on Amazon - amzn.to/3wRKvDM
► My speakers on Amazon - amzn.to/44WPWht
► My coffee machine on Amazon - amzn.to/3KjajvH
► My Synology NAS on Amazon - amzn.to/4bWZX0u
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3KjyA4F
► My external SSD drive on Amazon - amzn.to/3Kko5hG
► My external HDD drive on Amazon - amzn.to/44WQ3tp
► My microphone - amzn.to/45191iD
► Audio interface - amzn.to/4axuoJq
► Camera - amzn.to/3yMSH8M
TIMESTAMPS
0:00 Introduction
1:53 Mutating an object
2:52 Does onPush help?
3:33 Does trackBy help?
4:53 Trackby + RxJS
5:29 It is broken now
MOST POPULAR COURSES
► Javascript interview questions ➡️ monsterlessons-academy.com/co...
► Typescript interview questions ➡️ monsterlessons-academy.com/co...
► React interview questions ➡️ monsterlessons-academy.com/co...
► Angular Interview Questions ➡️ monsterlessons-academy.com/co...
► Angular Testing ➡️ monsterlessons-academy.com/co...
► React Testing ➡️ monsterlessons-academy.com/co...
► Building real project with Angular + NgRx ➡️ monsterlessons-academy.com/co...
► Building real NestJS API ➡️ monsterlessons-academy.com/co...
► Building real fullstack project ➡️ monsterlessons-academy.com/co...
CONNECT WITH ME!
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@MonsterlessonsAcademy]

WATCH NEXT: Change Detection in Angular - You Project Is 20x Slower! - th-cam.com/video/-tB-QDrPmuI/w-d-xo.htmlsi=ohe2O1_-nPxAZ_57

[@louangemusic]

Really helpful. I was struggling with the a complex for loop and performance issue, this one helped me fix that by understanding what I am doing wrong.

[@MonsterlessonsAcademy]

Glad it helps!

[@enverusta7811]

Thank you so much, it was really helpful

[@MonsterlessonsAcademy]

Glad it helped!

[@07bakabaka]

Amazing, good job.

[@MonsterlessonsAcademy]

Thank you very much!

[@Manoeuver]

great video and tips, thank you! quick question about the example you said at the end for an object with like 20 properties, how would you tackle that? Pass each property as an input so it doesn't trigger many re-renders?

[@MonsterlessonsAcademy]

In real project I won't optimize until I have performance problems. Not each project will have a bottle neck. Passing 20 props is not fun, I would split it in several comps and try to have 5 or less.
Additionally it doesn't make sense to optimize rerendering of a single component on the page. You would focus on optimizing comps which are rendered and re-rendering 1000 times on the page.

[@Manoeuver]

@@MonsterlessonsAcademy thanks for the reply, great insights!

[@Doktornikita]

THX BRO!

[@MonsterlessonsAcademy]

Any time!

[@yufgyug3735]

important tips, however worth noting that angular 17 (i think) introduced new template syntax with required track by, which makes this obsolete

[@MonsterlessonsAcademy]

It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

[@oleksiipopov5143]

thank you

[@MonsterlessonsAcademy]

You're welcome

[@izacaqsha3480]

How about the new "for" In angular v18, do we need to optimize it too in some kind of way like trackby?

[@Brendan2Alexander]

Trackby is required in v18

[@MonsterlessonsAcademy]

You mean @for control flow in html? It is there starting from Angular 17 and all same rules are applied there as well as trackby.

[@izacaqsha3480]

@@MonsterlessonsAcademy yes sir, I see, thanks

[@ChessPuzzlesVideo]

Well explained. But in real-time application, we pass object to child component because we need to access multiple properties of that object.

[@MonsterlessonsAcademy]

Sure. Which works just fine until you get to the point where performance is really important and you want to avoid renders.

[@Marshall86MT]

Which strategy would you use in this case? ​@@MonsterlessonsAcademy

[@justincantley9705]

You could create an input on the child for each property of the parent object that you need in some cases. This doesn't scale well, but could work for smaller objects.

[@adriantworek1057]

Great stuff as always! Any chance you will drop Analog.js crash course in the future?

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@Edgars82]

using new @for syntax flow Angular enforces to use trackBy as it is required and if someone starts learning Angular it should do it with latest version so this should not be an issue.

[@MonsterlessonsAcademy]

It doesn't make this obsolete. All same rules are applied to @for in control flow. track by by index can be bad, passing inputs as objects rerenders a child, etc.

[@Brendan2Alexander]

Really helpful thank u! Please don’t start a channel about making ice cream, because I will become so fat!😂

[@MonsterlessonsAcademy]

Lol. I would consider that.