Hoe werkt Angular change detection en wat doet OnPush?

Question

Accepted Answer

**Change detection** is hoe Angular de DOM in sync houdt met component data — na elke potentieel state-veranderende event controleert het componenten en werkt het de view bij waar data is gewijzigd. Standaard is deze controle breed; **`OnPush`** beperkt het voor performance.

## Hoe standaard change detection werkt

```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.
```

Standaard (`Default` strategy) controleert Angular **alle componenten** opnieuw bij elke event — correct, maar potentieel verspillend in grote bomen.

## OnPush — sla componenten over die niet kunnen zijn veranderd

```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;
}
```

Met `OnPush` **slaat** Angular het controleren van deze component over tenzij een van deze dingen gebeurt:

```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()
```

Dit kan het werk in grote bomen dramatisch verminderen — Angular negeert hele subtakken die niet kunnen zijn veranderd.

## De belangrijkste valkuil: immutabiliteit vereist

```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` is afhankelijk van **reference veranderingen** voor inputs, dus u moet state immutabel bijwerken (nieuwe objecten/arrays). In plaats daarvan muteren is de klassieke OnPush bug — de view wordt niet bijgewerkt.

## Handmatige controle

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

## De toekomst: signals + zoneless

Signals maken nog preciezere, **fine-grained** updates mogelijk (alleen de views die een gewijzigd signal lezen), in de richting van het volledig verwijderen van Zone.js.

## Waarom het belangrijk is

Change detection staat centraal in Angular performance.

Begrijpen dat de standaard strategie de hele boom controleert — en dat `OnPush` + immutable data controles beperkt tot componenten waarvan inputs daadwerkelijk zijn veranderd — is de belangrijkste hefboom voor het optimaliseren van grote apps.

De immutabiliteit vereiste is een veelvoorkomende bron van "waarom wordt mijn view niet bijgewerkt?" bugs, en signals vertegenwoordigen waar Angular heen gaat voor nog fijnere, efficiëntere reactiviteit.