Jak funguje detekce změn v Angular a co dělá OnPush?

Question

Accepted Answer

**Detekce změn** je to, jak Angular udržuje DOM v synchronizaci s daty komponenty — po jakékoli potenciálně stavově měnící se událost kontroluje komponenty a aktualizuje zobrazení tam, kde se data změnila. Ve výchozím nastavení je tato kontrola rozsáhlá; **`OnPush`** ji omezuje z důvodu výkonu.

## Jak funguje výchozí detekce změn

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

Ve výchozím nastavení (strategie `Default`) Angular znovu kontroluje **každou komponentu** na každou událost — správné, ale potenciálně plýtvavé ve velkých stromech.

## OnPush — přeskočit komponenty, které se nemohou změnit

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

S `OnPush` Angular **přeskočí** kontrolu této komponenty, pokud se nestane jedno z těchto:

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

Toto může dramaticky snížit práci ve velkých stromech — Angular ignoruje celé podstromy, které ví, že se nemohou změnit.

## Hlavní úskalí: vyžaduje se neměnnost

```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` se spoléhá na **změny referencí** pro vstupy, takže musíte aktualizovat stav neměnně (nové objekty/pole). Mutace na místě je klasická chyba OnPush — zobrazení se neaktualizuje.

## Ruční ovládání

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

## Budoucnost: signals + zoneless

Signals umožňují ještě přesnější, **jemně zrnité** aktualizace (pouze zobrazení čtoucí změněný signál), které směřují k úplnému odstranění Zone.js.

## Proč je to důležité

Detekce změn je ústředním prvkem výkonu Angular.

Porozumění tomu, že výchozí strategie kontroluje celý strom — a že `OnPush` + neměnná data omezují kontroly na komponenty, jejichž vstupy se skutečně změnily — je hlavní pákou pro optimalizaci velkých aplikací.

Požadavek na neměnnost je častým zdrojem chyb "proč se moje zobrazení neaktualizuje?", a signals představují směr, kterým Angular jde, aby dosáhl ještě jemnější, efektivnější reaktivity.