Jak działa detekacja zmian w Angular i co robi OnPush?

Question

Accepted Answer

**Change detection** to sposób, w jaki Angular synchronizuje DOM z danymi komponentu — po każdym potencjalnie zmieniającym stan zdarzeniu sprawdza komponenty i aktualizuje widok, gdzie dane się zmieniły. Domyślnie ta kontrola jest szeroka; **`OnPush`** zawęża ją dla wydajności.

## Jak działa domyślna detekacja zmian

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

Domyślnie (strategia `Default`) Angular ponownie sprawdza **każdy komponent** przy każdym zdarzeniu — prawidłowo, ale potencjalnie marnując zasoby w dużych drzewach.

## OnPush — pomiń komponenty, które nie mogły się zmienić

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

Z `OnPush` Angular **pomija** sprawdzanie tego komponentu, chyba że coś z tego się stanie:

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

To może dramatycznie zmniejszyć pracę w dużych drzewach — Angular ignoruje całe poddrzewa, które nie mogły się zmienić.

## Kluczowe zastrzeżenie: wymagana niezmienność

```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` opiera się na **zmianach referencji** dla danych wejściowych, więc musisz aktualizować stan niemutowalnie (nowe obiekty/tablice). Mutowanie w miejscu to klasyczny błąd OnPush — widok nie będzie aktualizowany.

## Kontrola manualna

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

## Przyszłość: sygnały + bezstrefowe

Sygnały umożliwiają jeszcze bardziej precyzyjne, **szczegółowe** aktualizacje (tylko widoki czytające zmieniony sygnał), wskazując na całkowite usunięcie Zone.js.

## Dlaczego to ważne

Detekacja zmian jest centralna dla wydajności Angular.

Zrozumienie, że strategia domyślna sprawdza całe drzewo — oraz że `OnPush` + dane niezmienne ograniczają sprawdzenia do komponentów, których dane wejściowe faktycznie się zmieniły — jest główną dźwignią optymalizacji dużych aplikacji.

Wymóg niezmienności jest częstym źródłem błędów "dlaczego mój widok się nie aktualizuje?", a sygnały reprezentują kierunek, w którym Angular zmierza, aby uzyskać jeszcze bardziej szczegółową, efektywniejszą reaktywność.