How does Angular change detection work, and what does OnPush do?

Question

Accepted Answer

**Change detection** is how Angular keeps the DOM in sync with component data — after any potentially state-changing event, it checks components and updates the view where data changed. By default this checking is broad; **`OnPush`** narrows it for performance.

## How default change detection works

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

By default (`Default` strategy), Angular re-checks **every component** on every event — correct, but potentially wasteful in large trees.

## OnPush — skip components that can't have changed

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

With `OnPush`, Angular **skips** checking this component unless one of these happens:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

This can dramatically cut the work in large trees — Angular ignores entire subtrees it knows can't have changed.

## The key gotcha: immutability required

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` relies on **reference changes** for inputs, so you must update state immutably (new objects/arrays). Mutating in place is the classic OnPush bug — the view won't update.

## Manual control

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## The future: signals + zoneless

Signals enable even more precise, **fine-grained** updates (only the views reading a changed signal), pointing toward removing Zone.js entirely.

## Why it matters

Change detection is central to Angular performance.

Understanding that the default strategy checks the whole tree — and that `OnPush` + immutable data limits checks to components whose inputs actually changed — is the main lever for optimizing large apps.

The immutability requirement is a frequent source of "why isn't my view updating?" bugs, and signals represent where Angular is heading for even finer-grained, more efficient reactivity.