DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Improving Angular Application Performance - using TrackBy
Nikhil Dhawan for This is Angular

Posted on • Updated on

Improving Angular Application Performance - using TrackBy

Hi all, in this post, I will talk about how can you can improve the performance of the Angular application using trackBy in which you are using ngFor directive for displaying data and upon some user action we need to change some part of data.

When we just use ngFor directive where we need to change data it will cause the complete list to rerender and might affect application performance. So at that time, we should use trackBy implementation to make angular aware which among the data is old and which is the new addition.

We will see this with an example, full demo code can be referred to at GitHub and Stackblitz.

I this demo we have a list which we show via ngFor and a button with which we will add another item to the list.
image
And corresponding code is

<div>
  <ul>
    <li *ngFor="let item of items; "> {{item.name}} </li>
  </ul>
</div>

<input type="button" value="Add Angular" (click)="addItem()">
Enter fullscreen mode Exit fullscreen mode
export class AppComponent {
  title = 'trackby-example';
  items: Item[] = [
    { id: 1, name: 'HTML' },
    { id: 2, name: 'CSS' },
    { id: 3, name: 'JavaScript' },
  ];
  addItem() {
    this.items = [
      { id: 1, name: 'HTML' },
      { id: 2, name: 'CSS' },
      { id: 3, name: 'JavaScript' },
      { id: 4, name: 'Angular' },
    ];
  }
}

Enter fullscreen mode Exit fullscreen mode

so now if you open the chrome developer tool and focus on list items while clicking on Add button you will see, the whole list is rerendered on the screen(which can be seen when in dev tools we see highlighted rows that get rerendered as in the below image)
image
Now let us implement the trackBy function for this and see the difference.
The html code will changes will be

 <li *ngFor="let item of items;trackBy:trackBy "> {{item.name}} </li>
Enter fullscreen mode Exit fullscreen mode

and the code for this function in typescript will be

trackBy(index: number, item: Item) {
    return item.id;
  }
Enter fullscreen mode Exit fullscreen mode

So if you see here we are returning id in the trackBy function, which is something unique to the object in the array which helps Angular understand the uniqueness of each object in our case.
If you now relaunch the application and do the same activity you will be able to see that only a new object line is added without rerendering the old objects.
image

Hope you were able to understand the concept of using trackBy and how it can help improve performance.
If you liked it please share it with your friends or if any suggestions reach me out on Twitter or comment below.
Till next time Happy Learning!

Top comments (7)

Collapse
 
wojtrawi profile image
Wojciech TrawiΕ„ski

If you use the ngrx store or the component store to handle collections, you will probably not benefit from using the custom trackBy function, since the default one relies on comparing object by reference and if you update a single item in a collection, you only update a single object. However, if you fetch the whole collection after updating a single item, the custom trackBy is a must-have.

Collapse
 
jasontanpc profile image
Jason Tan

Will pass it on to my team and try it out.

Collapse
 
diegojeptha profile image
Diego

Im already looking at ways for using this, this one!

Collapse
 
rebaiahmed profile image
Ahmed Rebai

I have a question, If I'm going to add trackBy to all my ngFor directives, when I measure the performance with Lighthouse it's going to increase?

Collapse
 
chan_austria777 profile image
chan πŸ€–

Is this behavior already enabled on *ngFor on latest angular versions?

Tired of sifting through your feed?

You can change your feed and see more relevant posts by adding a rating to different tags on DEV. Head here to adjust your weights.