OnPush change detection strategy in Angular - Performance & Optimization

Performance: OnPush change detection strategy

HIGH IMPACT

This affects how often Angular checks and updates the component's view, impacting rendering speed and responsiveness.

Optimizing Angular component rendering by controlling change detection

Angular

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

@Component({
  selector: 'app-example',
  template: `<p>{{ counter }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  @Input() counter = 0;
}

OnPush runs change detection only when input properties change or events inside the component occur, reducing checks.

📈 Performance GainReduces change detection runs by skipping unchanged components, improving input responsiveness (INP).

Optimizing Angular component rendering by controlling change detection

Angular

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

@Component({
  selector: 'app-example',
  template: `<p>{{ counter }}</p>`
})
export class ExampleComponent {
  counter = 0;
  // Default change detection strategy (CheckAlways)
}

Default change detection runs on every event and async operation, causing frequent re-rendering even if data hasn't changed.

📉 Performance CostTriggers change detection for entire component tree on every event, causing many unnecessary checks and reflows.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default (CheckAlways)	Many unnecessary DOM checks	Multiple reflows on unrelated changes	Higher paint cost due to frequent updates	[X] Bad
OnPush Change Detection	Checks only on input or event changes	Minimal reflows limited to actual changes	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

Angular's change detection decides when to update the DOM. OnPush limits checks to input changes or events inside the component, reducing the frequency of style recalculation, layout, and paint.

→Change Detection

→Style Calculation

→Layout

→Paint

⚠️ BottleneckChange Detection stage is most expensive due to frequent checks in default strategy.

Core Web Vital Affected

INP

This affects how often Angular checks and updates the component's view, impacting rendering speed and responsiveness.

Optimization Tips

1Use OnPush to limit change detection to input or event changes.

2Avoid mutating objects directly; instead, replace inputs to trigger updates.

3Combine OnPush with immutable data patterns for best performance.

Performance Quiz - 3 Questions

What is the main performance benefit of using OnPush change detection in Angular?

A It reduces the number of change detection runs by checking only when inputs or events change.

B It disables change detection completely to improve speed.

C It forces Angular to check all components more frequently.

D It caches the entire DOM to avoid re-rendering.

DevTools: Performance

How to check: Record a performance profile while interacting with the Angular app. Look for frequent 'Change Detection' events and their duration.

What to look for: Fewer and shorter change detection cycles indicate better performance with OnPush.