Improving Angular Application Performance - using TrackBy

#angular #webdev

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.

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()">

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' },
    ];
  }
}

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)

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>

and the code for this function in typescript will be

trackBy(index: number, item: Item) {
    return item.id;
  }

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.

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 (5)

Wojciech Trawiński • Feb 13 '22

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.