Kako Angular change detection funkcionira, i što OnPush radi?

Question

Accepted Answer

**Change detection** je kako Angular drži DOM u sinkronizaciji s podacima komponente — nakon bilo kojeg potencijalno state-changing eventa, provjerava komponente i ažurira prikaz gdje se podaci promijenili. Zadano je ova provjera sveobuhvatna; **`OnPush`** je sužava radi performansi.

## Kako zadana change detection funkcionira

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

Zadano (`Default` strategija), Angular ponovno provjerava **sve komponente** na svakom eventu — ispravno, ali potencijalno neučinkovito u velikim stablima.

## OnPush — preskoči komponente koje se ne mogu promijeniti

```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 **preskaće** provjeru ove komponente osim ako se dogodi jedno od toga:

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

Ovo može dramatično smanjiti rad u velikim stablima — Angular ignora cijela podstabla za koja zna da se ne mogu promijeniti.

## Ključna zamka: potrebna je immutabilnost

```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 oslanja na **promjene reference** za inpute, pa morate ažurirati stanje na nepromjenjiv način (novi objekti/nizovi). Mutiranje na mjestu je klasična OnPush greška — prikaz se neće ažurirati.

## Ručna kontrola

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

## Budućnost: signals + bez zone-a

Signali omogućuju još preciznije, **finozrnate** ažuriranja (samo prikaze koji čitaju promijenjeni signal), ukazujući na uklanjanje Zone.js-a u potpunosti.

## Zašto je to važno

Change detection je ključan za performanse Angular-a.

Razumijevanje da zadana strategija provjerava cijelo stablo — i da `OnPush` + nepromjenjivi podaci ograničavaju provjere na komponente čiji su se inputi zapravo promijenili — je glavni ključ za optimizaciju velikih aplikacija.

Zahtjev za immutabilnosti je česta izvor greške "zašto se moj prikaz ne ažurira?", a signali predstavljaju smjer prema kojem Angular ide za još finozrniju, učinkovitiju reaktivnost.