All 5 Performance & Lazy Loading questions
More in Performance & Lazy Loading
What is lazy loading in Angular and why is it useful for performance? How do you check your Angular app's actual bundle size and find opportunities to reduce it? How does the OnPush change detection strategy improve performance in a large Angular application? How would you use Angular's built in deferred loading, the at defer block, to improve performance further?
Advertisement
Angular › Performance & Lazy Loading

How does using trackBy, or the track expression in the newer at for syntax, improve the performance of rendering lists?

Intermediate

Answer

Without a tracking expression, Angular assumes every item in a list might be a completely different one whenever the list reference changes, potentially destroying and recreating every single element unnecessarily. Providing a unique identifier lets Angular correctly match existing elements to the same underlying data, updating only what actually changed instead of rebuilding the entire list.
@for (product of products; track product.id) {
  <app-product-card [product]="product" />
}
// Angular reuses existing elements correctly instead of recreating the entire list
Real-world example A product catalog page avoids unnecessarily destroying and recreating every single product card whenever the underlying list is refreshed with mostly the same products, thanks to tracking each item by its unique product id.

Common follow-ups: What happens if you use the array index as the tracking value instead of a genuinely unique id?;How much of a real performance difference does this make for a list with thousands of items?

New Control Flow Syntax (@if @for & @switch);Directives
All 5 Performance & Lazy Loading questions