Hvordan fungerer Angular endringdeteksjon, og hva gjør OnPush?

Question

Accepted Answer

**Change detection** er hvordan Angular holder DOM i synk med komponentdata — etter en potensielt tilstandsendrede hendelse kontrollerer den komponenter og oppdaterer visningen der data har endret seg. Som standard er denne kontrollen bred; **`OnPush`** innsnevrer den for ytelse.

## Hvordan standard endringdeteksjon fungerer

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

Som standard (`Default` strategi) gjenkontrollerer Angular **alle komponenter** ved hver hendelse — riktig, men potensielt sløsing i store trær.

## OnPush — hopp over komponenter som ikke kan ha endret

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

Med `OnPush` **hopper** Angular over kontrollen av denne komponenten med mindre en av disse hendelsene inntreffer:

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

Dette kan dramatisk redusere arbeidet i store trær — Angular ignorerer hele undertrær som ikke kan ha endret seg.

## Den viktigste gotcha: immutabilitet påkrevd

```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` er avhengig av **referanseendringer** for innspill, så du må oppdatere tilstand uforanderlig (nye objekter/arrayer). Mutasjon på stedet er den klassiske OnPush-feilen — visningen oppdateres ikke.

## Manuell kontroll

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

## Fremtiden: signaler + zoneless

Signaler muliggjør enda mer presise, **fine-grained** oppdateringer (bare visninger som leser et endret signal), peker mot fjerning av Zone.js helt.

## Hvorfor det betyr noe

Endringdeteksjon er sentral for Angular ytelse.

Å forstå at standardstrategien kontrollerer hele treet — og at `OnPush` + uforanderlige data begrenser kontroller til komponenter hvis innspill faktisk har endret seg — er hovedspaken for optimalisering av store apper.

Immutabilitetskravet er en hyppig kilde til "hvorfor oppdateres ikke min visning?" feil, og signaler representerer hvor Angular går for enda finere, mer effektiv reaktivitet.