ChangeDetectionStrategy.OnPush (Real Performance Gains)

OnPush makes Angular skip some change detection work. It can dramatically improve performance in large component trees. ## What OnPush means With default change detection: - Angular checks many components frequently. With OnPush: - Angular checks a component only when: 1) an @Input reference changes 2) an event happens inside it 3) an Observable/Signal it uses emits/updates ## Use OnPush ```ts import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; @Component({ selector: 'app-user-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: ` <p>{{ user.name }} ({{ user.role }})</p> `, }) export class UserRowComponent { @Input() user!: { id: number; name: string; role: string }; } ``` ## The key rule: immutable updates If you mutate an object in place, OnPush may not detect it. ❌ Bad: ```ts this.user.name = 'New'; // same object reference ``` ✅ Good: ```ts this.user = { ...this.user, name: 'New' }; // new reference ``` > Next: TrackBy + virtualization patterns for huge lists.