Hur fungerar Angulars ändringsdetektering, och vad gör OnPush?

Question

Accepted Answer

**Ändringsdetektering** är hur Angular håller DOM synkroniserad med komponentdata — efter varje potentiellt tillståndsändring kontrollerar den komponenter och uppdaterar vyn där data ändrats. Som standard är denna kontroll bred; **`OnPush`** begränsar den för prestanda.

## Hur standard ändringsdetektering fungerar

```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) omkontrollerar Angular **varje komponent** på varje händelse — korrekt, men potentiellt slöseri i stora träd.

## OnPush — hoppa över komponenter som inte kan ha ändrats

```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` **hoppar** Angular över att kontrollera denna komponent om inte något av detta inträffar:

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

Detta kan dramatiskt minska arbetet i stora träd — Angular ignorerar helt träd som den vet inte kan ha ändrats.

## Den viktigaste gotchan: immutabilitet krävs

```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` förlitar sig på **referensändringar** för inputs, så du måste uppdatera tillståndet immutabelt (nya objekt/arrayer). Att mutera på plats är den klassiska OnPush-buggen — vyn uppdateras inte.

## Manuell kontroll

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

## Framtiden: signals + zoneless

Signals möjliggör ännu mer exakta, **finkörniga** uppdateringar (endast vyerna som läser en ändrad signal), vilket pekar mot att helt ta bort Zone.js.

## Varför det är viktigt

Ändringsdetektering är central för Angulars prestanda.

Att förstå att standardstrategin kontrollerar helt träd — och att `OnPush` + immutabel data begränsar kontroller till komponenter vars inputs faktiskt ändrats — är huvudhävstången för att optimera stora appar.

Immutabilitetskravet är en ofta förekommande källa till "varför uppdateras inte min vy?" buggar, och signals representerar vart Angular är på väg för ännu finkörnigare, mer effektiv reaktivitet.