Default change detection strategy in Angular - Performance & Optimization

Performance: Default change detection strategy

MEDIUM IMPACT

This affects how often Angular checks and updates the UI, impacting interaction responsiveness and CPU usage.

Updating UI on user input with many components

Angular

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<child-comp></child-comp>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {}

// OnPush strategy limits checks to input changes and events inside component

Limits change detection to components with changed inputs or events, reducing unnecessary checks and improving responsiveness.

📈 Performance GainReduces change detection cycles from N to only affected components, improving INP

Updating UI on user input with many components

Angular

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<child-comp></child-comp>`,
  changeDetection: ChangeDetectionStrategy.Default
})
export class AppComponent {}

// Default strategy triggers change detection for all components on every event

Triggers change detection for the entire component tree on every event, causing unnecessary CPU work and slower input responsiveness.

📉 Performance CostTriggers N reflows and change detection cycles per event, where N is number of components

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default change detection	Checks all components every event	Triggers multiple reflows if many updates	High paint cost if many changes	[X] Bad
OnPush change detection	Checks only changed components	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

Angular's default change detection runs after every browser event, traversing the entire component tree to check for updates, which leads to layout recalculations and paints if changes occur.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection traversal and subsequent layout recalculations

Core Web Vital Affected

INP

This affects how often Angular checks and updates the UI, impacting interaction responsiveness and CPU usage.

Optimization Tips

1Default strategy checks all components after every event, which can slow responsiveness.

2Use OnPush strategy to limit change detection to affected components only.

3Avoid heavy component trees with default strategy to reduce CPU and layout costs.

Performance Quiz - 3 Questions

What is the main performance drawback of Angular's default change detection strategy?

A It never updates the UI automatically

B It only checks components with changed inputs

C It runs change detection on the entire component tree after every event

D It disables change detection completely

DevTools: Performance

How to check: Record a performance profile while interacting with the app, then look for long 'Change Detection' tasks and frequent layout recalculations.

What to look for: High CPU time spent in change detection and layout indicates default strategy overhead; fewer and shorter tasks indicate better performance.