TrackBy in ngFor in Angular - Performance & Optimization

Performance: TrackBy in ngFor

HIGH IMPACT

This affects how Angular updates the DOM when rendering lists, improving rendering speed and reducing layout shifts.

Rendering a list with ngFor and updating items frequently

Angular

<div *ngFor="let item of items; trackBy: trackById">{{item.name}}</div>

trackById(index: number, item: any) {
  return item.id;
}

Angular reuses existing DOM elements by tracking items with unique IDs, minimizing DOM changes.

📈 Performance Gainsingle reflow per changed item, significantly fewer reflows overall

Rendering a list with ngFor and updating items frequently

Angular

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

Angular recreates all DOM elements on each update, causing many reflows and layout shifts.

📉 Performance Costtriggers N reflows per update where N is the number of items

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
ngFor without trackBy	Removes and recreates all nodes on update	N reflows per update (N = list length)	High paint cost due to full node replacement	[X] Bad
ngFor with trackBy	Reuses existing nodes, updates only changed items	Reflows only for changed items	Lower paint cost due to minimal DOM changes	[OK] Good

Rendering Pipeline

When Angular updates a list, it compares new and old items. Without trackBy, it destroys and recreates DOM nodes, triggering layout recalculations and repaints. With trackBy, Angular matches items by ID, reusing DOM nodes and reducing layout thrashing.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to DOM node removal and insertion

Core Web Vital Affected

CLS

This affects how Angular updates the DOM when rendering lists, improving rendering speed and reducing layout shifts.

Optimization Tips

1Always use trackBy with ngFor when rendering lists that update frequently.

2Use a unique identifier like an ID in the trackBy function for best results.

3Avoid recreating DOM nodes unnecessarily to reduce layout shifts and improve CLS.

Performance Quiz - 3 Questions

What is the main performance benefit of using trackBy in ngFor?

A It reduces unnecessary DOM node creation and destruction.

B It increases the bundle size slightly.

C It delays rendering until all data is loaded.

D It automatically sorts the list items.

DevTools: Performance

How to check: Record a performance profile while updating the list. Look for layout and paint events related to the list container.

What to look for: Fewer layout recalculations and shorter paint times indicate good use of trackBy.