Use trackBy to improve Angular application performance

Looking to make your Angular application perform better? 🏋🏼‍♂️

Then here's how to take advantage of Angular's trackBy function. And make your Angular application perform like a boss.

Angular has this cool thing called Zone.js that triggers change detection anytime a DOM event occurs.

And in case you weren't aware, Zone.js is the engine that powers an Angular application. If you want to learn more about how it works, I explain that in this article.

Angular also has another thumpin-cool feature known as ngFor. Just hand it an array of information to render and watch it whiz! 😏

I mean... it's a nifty Angular feature... that was built to make you coooooh and aaaaah... until you start abusing it. And then it SNAPS and POPS and blows up in your face! 🤯

What is the problem with ngFor?

Because Zone.js triggers a re-render every time a DOM event occurs that means your list is being re-rendered when a button is clicked, etc... and of course you never see it because the list's data hasn't changed.

This might be fine if your component is only rendering 5 items or less. But small lists tend to become large lists, and large lists will generate performance issues unless you're a wise Angular developer. And buddy, that's what I intend to make outta ya - a shrewd and wise Angular developer that knows how to make your Angular apps perform!

So how do we solve this problem?

The trackByFn

To describe the Angular trackBy function in a nutshell, it is an optional function that can be used with Angular's ngFor. Angular trackBy is used to define how to track changes for an item in an iterable and Angular uses the specified trackBy function to tracks changes by the return value of the function.

Buddy, are you still with me?

Great! How about we dive into some code. What does it take to create our own trackBy function? And avoid expensive re-rendering operations?

Below is a basic example of the Angular trackBy function. The first step is to add a trackBy function to our components Typescript file, like this.

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

And then, we'll modify our ngFor to use the new trackBy function.

<ul>
    <li *ngFor="let item of items; index as i; trackBy: trackByFn">
        {{ item.value }}
    </li>
</ul>

So what have we just done?

Basically, we've told the Angular2 framework how to handle our list data in a more performant way by giving it a function that returns the unique id for every item in our iterable. By using this function, Angular will know what list items need to be re-rendered, without having to tear down the entire DOM and rebuilt it.