ngDoCheck for custom change detection in Angular - Performance & Optimization

Performance: ngDoCheck for custom change detection

HIGH IMPACT

This affects the interaction responsiveness and rendering speed by controlling how often Angular checks for changes in components.

Detecting changes in a component with complex or non-primitive data

Angular

export class MyComponent implements DoCheck {
  private oldValue: any;
  ngDoCheck() {
    if (this.hasChanged(this.data, this.oldValue)) {
      this.oldValue = this.data;
      this.updateView();
    }
  }
  hasChanged(newVal: any, oldVal: any) {
    // shallow reference comparison
    return newVal !== oldVal;
  }
  updateView() {
    // update UI only when needed
  }
}

Runs update logic only when data actually changes, reducing unnecessary work and improving responsiveness.

📈 Performance Gainreduces work during change detection cycles by up to 90%, improving INP and reducing UI blocking

Detecting changes in a component with complex or non-primitive data

Angular

export class MyComponent implements DoCheck {
  ngDoCheck() {
    // heavy or frequent checks
    this.expensiveCheck();
  }
  expensiveCheck() {
    // complex logic running every change detection cycle
  }
}

Runs expensive logic on every change detection cycle, causing slow input response and UI jank.

📉 Performance Costtriggers change detection on every event, blocking rendering for tens of milliseconds per cycle

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy logic in ngDoCheck every cycle	Many unnecessary DOM checks	Multiple reflows if DOM updated unnecessarily	High paint cost due to blocking	[X] Bad
Optimized ngDoCheck with change comparison	Minimal DOM updates only on real changes	Single reflow per actual change	Low paint cost, smooth rendering	[OK] Good

Rendering Pipeline

ngDoCheck hooks into Angular's change detection cycle, which runs before the browser paints. Heavy or frequent ngDoCheck logic delays the Layout and Paint stages by blocking the main thread.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection stage due to expensive or frequent checks

Core Web Vital Affected

INP

This affects the interaction responsiveness and rendering speed by controlling how often Angular checks for changes in components.

Optimization Tips

1Avoid heavy or synchronous logic inside ngDoCheck.

2Use shallow or optimized comparisons to detect real changes.

3Run update logic only when data actually changes to reduce blocking.

Performance Quiz - 3 Questions

What is the main performance risk of using ngDoCheck without optimization?

A Running expensive checks on every change detection cycle, causing UI lag

B Skipping change detection entirely, causing stale UI

C Increasing bundle size significantly

D Causing layout shifts during animations

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks or frequent change detection cycles in the flame chart.

What to look for: High CPU usage during change detection, long blocking times, and frequent reflows indicate poor ngDoCheck performance.