Performance impact of change detection in Angular - Performance & Optimization

Performance: Performance impact of change detection

HIGH IMPACT

Change detection affects how quickly Angular updates the UI after data changes, impacting interaction responsiveness and rendering speed.

Updating UI with many components on each data change

Angular

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<child-comp *ngFor="let item of items" [data]="item"></child-comp>`
})
export class AppComponent {
  items = Array(1000).fill(0).map((_, i) => i);
  update() {
    this.items = this.items.map(x => x + 1);
  }
}

Using OnPush strategy limits change detection to components with changed inputs, reducing unnecessary checks.

📈 Performance Gainreduces change detection cycles by 90%+, improving update speed and UI responsiveness

Updating UI with many components on each data change

Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<child-comp *ngFor="let item of items" [data]="item"></child-comp>`
})
export class AppComponent {
  items = Array(1000).fill(0).map((_, i) => i);
  update() {
    this.items = this.items.map(x => x + 1);
  }
}

Angular runs change detection on all components every time 'update' is called, causing many checks and slow UI updates.

📉 Performance Costtriggers 1000+ change detection cycles per update, blocking UI for 100+ ms on slow devices

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default change detection with many components	Many checks on all components	Multiple reflows if DOM updates	High paint cost due to frequent updates	[X] Bad
OnPush change detection with immutable inputs	Checks only changed components	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

Angular's change detection runs after events or async tasks, checking component data and updating the DOM if needed.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection stage is most expensive when many components are checked unnecessarily.

Core Web Vital Affected

INP

Change detection affects how quickly Angular updates the UI after data changes, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Use OnPush change detection to limit checks to components with changed inputs.

2Avoid mutating objects or arrays directly; use immutable patterns to trigger OnPush updates.

3Minimize the number of components checked by change detection to improve interaction speed.

Performance Quiz - 3 Questions

What is the main performance problem with Angular's default change detection on large component trees?

A It only updates the DOM once per second.

B It skips checking components, causing stale UI data.

C It runs change detection on all components every update, causing slow UI response.

D It blocks network requests during change detection.

DevTools: Performance

How to check: Record a performance profile while triggering UI updates. Look for long 'Change Detection' tasks and many component checks.

What to look for: High time spent in 'Change Detection' indicates performance issues; fewer and shorter tasks show better performance.