trackBy - Efficient for loop in angular | Improve Your Application Performance with trackBy

Рет қаралды 14,562

4 жыл бұрын

trackBy function help angular to improve application performance by tracking or keeping a reference of the rendered data so that angular will not re-render the DOM tree for the same data assignment.
we can use the trackBy function with *ngFor to track the objects in the loop. Angular can also track the objects if their order in the array is different, and this can be a good use case.
Angular Performance improvement: bit.ly/3fFa1Q8
Progressive Web Apps Development: bit.ly/359BXpK
Angular Tutorial: bit.ly/2Tnwk1t
Dashboard with chart.js: bit.ly/3c9Jd85
Application Development: bit.ly/398w7Gf
Upload File to server: bit.ly/3ccsjWd
Slack: bit.ly/2RXPcEK
You can support me on Patreon: / funofheuristic
Thanks for watching...

Пікірлер: 34

@healthyliving4530 22 күн бұрын

Thanks for the so much effort you have put , really appreciate it :)

@PROcrastiDRIVESVofficial Жыл бұрын

THANK YOU!!!!!! I SPENT F*****G HOURS TRYING TO FIND A SIMPLE EXPLANATION FOR HOW THIS WORKS!!!!! F*****G ANGULAR DOCUMENTATION IS F*****G SH*THOUSE!!!!!! YOU'RE VIDEO EXPLAINED IT PERFECTLY AND I FINALLY FIXED A BUG I SPENT A WHOLE DAY ON!!! YOU'RE A HERO!!!!!!!

@pruthvi7798 4 ай бұрын

Good Explanation

@poormancodespmc4598 3 жыл бұрын

I was struggling to improve a feed with lots of posts. I was rerendering the whole list each time. Now I am going to fly 😀

@gwynethpena5305 3 жыл бұрын

Thank you. This is awesome. This is my first time to encounter trackby. So happy that I come across your channel.

@varaprasadreddy6420 4 жыл бұрын

Thank you very much for this detailed version

@estevesporai2758 3 жыл бұрын

Wow, this channel is a treasure.

@rajansharma3171 3 жыл бұрын

thanks for this, best teacher on youtube

@jagadeeshmanoharan9613 4 жыл бұрын

Very Useful. Thank you so much. Keep doing.

@hanmingzheng5592 2 жыл бұрын

I did some experiments with trackby and I think the benefit is limited. Angular will not rerender existing DOM array item if we do: 1. this.users.push(newUser) 2. this.users = [...this.users, newUser] the case I can think of that this trackby might make a diff is when we refetch data from an api and we have to create new references of each item. And even this, it might make sense to rerender the exiting DOM, and... this is really case by case. and having to add trackBy function is more boilerplate. I guess what I mean is, it is good to know this trackBy but dont get too caught up on this. if ur app is slow, then there is a small chance that this might be the cause.

@danieloseka6745 4 жыл бұрын

Thank you very much . twas a nice enlightenment

@bhavesh2952 3 жыл бұрын

very well explained buddy. thank you :)

@HM_Milan 2 жыл бұрын

you are amazing brother.super explanation thank you

@sona4612 2 жыл бұрын

Wow.. great explanation..❤️❤️❤️

@janakaedirisinghe9549 4 жыл бұрын

Right time, Right video :p

@felixurbano1199 Жыл бұрын

Excellent content! well explained ! :3

@shibinjohn2792 2 жыл бұрын

Very helpful video brother.❤

@siddharthatyagi3744 4 жыл бұрын

Well selection of Topic.

@mearn_ctaftsman 3 жыл бұрын

Brother, you are really awesome 👍👍👍👍

@antoniocarlosdev6104 2 жыл бұрын

Amazing!!!

@reshmahussain7195 2 жыл бұрын

Is it necessary to pass the index argument in trackBy function if it is not used in the body?

@MihirModi-dw4lg Жыл бұрын

If it is also re-render list when some value changes (except unique id), then what is the purpose of unique id?

@lipiprajapati8322 4 жыл бұрын

Hii subhrat, I am fetching data from json file where data present as an array like parent with some child, by a service. I am getting all data with parent and child in console and DOM. But when I am going to interpolating individual child value, I am getting undefined. So, how can I print child value in DOM??

@FunOfHeuristic 4 жыл бұрын

Use optional chaining like user?. employe[0]?.name