*ngFor trackBy: Smarter DOM Updates in Angular

Why it exists

When you render a list of items with *ngFor and the underlying data array changes, Angular needs to update the DOM. Without a hint, its default strategy is to assume everything is new, remove all existing DOM elements for the list, and create new ones from scratch. This is inefficient and can cause noticeable UI lag, lost focus, and broken animations.

The mental model

Think of trackBy as giving each list item a permanent name tag. Without it, when the list updates, Angular sees a crowd of strangers and rebuilds the entire group. With trackBy, Angular can read the name tags. It can see that "item-42" is still here but just moved, or that "item-101" is new. It works with the items it recognizes instead of starting over.

How it works

The trackBy property on *ngFor accepts a function. This function is called for each item in the collection and should return a unique identifier for that item. Angular then uses this identifier, not the object's memory reference, to track the item. When the list data is updated, Angular compares the list of old identifiers with the new ones. This allows it to detect which items were added, removed, or moved, and apply the minimal set of DOM operations required to reflect the new state.

When to use it

You should use trackBy on any *ngFor that iterates over a collection of objects, especially if that collection is dynamic (e.g., loaded from an API, filtered, or sorted by the user). It is a critical performance optimization for lists of any significant size or complexity. Using a unique property like item.id is the most common and effective strategy.

When not to use it

It's rarely a good idea to omit trackBy. The only scenario where it might be considered unnecessary is for a truly static list that will never change during the component's lifecycle. For lists of primitive types like strings or numbers, you can simply return the item itself from the trackBy function, as its value is its unique identity.

One canonical example

In your component's template, you bind the trackBy function: {{ user.name }}

In your component's TypeScript file, you define the function:

trackByUserId(index: number, user: { id: string; name: string }): string { return user.id; }

This tells Angular to identify each user by their id property, preventing a full DOM re-render if the users array is replaced with a new array containing the same users.

Note on deprecation

The *ngFor directive is deprecated as of Angular v20. The modern approach is to use the new @for block syntax, which provides optimized tracking by default and often eliminates the need for a manual trackBy function.