Performance impact of change detection in Angular - Step-by-Step Execution

Concept Flow - Performance impact of change detection

User Event or Async Data

↓

Trigger Change Detection

↓

Angular Checks Components

↓

Evaluate Component Bindings

↓

Update DOM if Needed

↓

Render Updated View

↓

Wait for Next Event

This flow shows how Angular runs change detection after events or data changes, checking components and updating the view, which affects performance.

Execution Sample

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Count: {{count()}}</button>`
})
export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(c => c + 1); }
}

A simple Angular component using signals where clicking the button increments a count, triggering change detection.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial load	count=0	Render component	count=0	Button text	Button shows 'Count: 0'
2	User clicks button	count=0	Call increment()	count=1	Button text	Button updates to 'Count: 1'
3	Change detection runs	count=1	Check bindings	count=1	Button text	DOM updated with new count
4	User clicks button again	count=1	Call increment()	count=2	Button text	Button updates to 'Count: 2'
5	Change detection runs	count=2	Check bindings	count=2	Button text	DOM updated with new count
6	No further events	count=2	Idle	count=2	No re-render	DOM unchanged

💡 No more user events, so change detection does not run again.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
count	0	1	2	2

Key Moments - 2 Insights

Why does Angular check all components even if only one component's state changes?

Angular's default change detection strategy checks all components in the tree to ensure UI consistency, as shown in steps 3 and 5 where change detection runs after each increment.

How does using signals affect performance during change detection?

Signals allow Angular to track exactly which parts changed, so only affected components re-render, reducing unnecessary checks and DOM updates, as seen in the minimal re-rendering in steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after step 4?

A 1

B 2

C 0

D 3

💡 Hint

Check the 'State After' column in row for step 4.

At which step does Angular update the DOM to show 'Count: 1'?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look for the step where 'DOM Change' shows update to 'Count: 1'.

If the component used OnPush change detection, how would the 'What Re-renders' column change?

A Only components with changed inputs re-render

B No components re-render

C All components re-render every time

D DOM updates happen without re-render

💡 Hint

OnPush strategy limits re-rendering to components with changed inputs.

Concept Snapshot

Angular runs change detection after events or data changes.
It checks components to update the DOM if needed.
Default strategy checks all components, which can affect performance.
Using signals or OnPush strategy reduces unnecessary checks.
Efficient change detection improves app speed and responsiveness.

Full Transcript

This visual execution shows how Angular's change detection works and impacts performance. When a user clicks the button, the component's count signal updates. Angular then runs change detection, checking component bindings and updating the DOM if values changed. The table traces each step, showing state before and after, what re-renders, and DOM changes. Beginners often wonder why Angular checks all components; this is to keep UI consistent. Using signals helps Angular know exactly what changed, so it only updates necessary parts, improving performance. The quiz questions help reinforce understanding of state changes and rendering behavior.