Why change detection matters in Angular - Performance Evidence

Performance: Why change detection matters

HIGH IMPACT

Change detection impacts how fast the page updates after user actions or data changes, affecting interaction responsiveness and visual stability.

Updating UI when data changes in Angular

Angular

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div>{{ counter }}</div><button (click)="increment()">Increment</button>`
})
export class AppComponent {
  counter = 0;
  increment() {
    this.counter++;
  }
}

OnPush strategy limits change detection to only when input properties change or events occur inside the component, reducing unnecessary checks.

📈 Performance Gainreduces change detection runs by up to 90% in large apps, improving input responsiveness

Updating UI when data changes in Angular

Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>{{ counter }}</div><button (click)="increment()">Increment</button>`
})
export class AppComponent {
  counter = 0;
  increment() {
    this.counter++;
  }
}

Default change detection runs for the entire component tree on every event, causing many unnecessary checks and DOM updates.

📉 Performance Costtriggers full component tree check on each event, causing slow input responsiveness on large apps

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default Change Detection	Many unnecessary checks	Multiple reflows per event	High paint cost due to frequent updates	[X] Bad
OnPush Change Detection	Checks only when needed	Single or minimal reflows	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

Angular's change detection runs after events or async tasks, checking component data and updating the DOM if needed. Inefficient detection causes excessive Layout and Paint work.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution during change detection triggers costly Layout and Paint if many DOM updates occur.

Core Web Vital Affected

INP

Change detection impacts how fast the page updates after user actions or data changes, affecting interaction responsiveness and visual stability.

Optimization Tips

1Avoid running change detection on the entire component tree unnecessarily.

2Use OnPush change detection strategy for better performance.

3Keep component inputs immutable to help Angular detect changes efficiently.

Performance Quiz - 3 Questions

What is the main performance problem with Angular's default change detection?

A It never updates the DOM automatically

B It runs checks on the entire component tree on every event

C It only updates components with OnPush strategy

D It blocks network requests during detection

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for long scripting tasks labeled 'change detection'.

What to look for: High scripting time during change detection indicates inefficient updates; shorter tasks mean better performance.