Kako deluje zaznavanje sprememb v Angularju in kaj počne OnPush?

Question

Accepted Answer

**Zaznavanje sprememb** je način, kako Angular vzdržuje sinhronizacijo med DOM-om in podatki komponente — po vsakem dogodku, ki bi lahko spremenil stanje, preveri komponente in posodobi pogled tam, kjer so se podatki spremenili. Privzeto je to preverjanje obsežno; **`OnPush`** ga za večjo učinkovitost zmanjša.

## Kako deluje privzeto zaznavanje sprememb

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

Privzeto (`Default` strategija) Angular ponovno preveri **vsako komponento** pri vsakem dogodku — to je pravilno, vendar je lahko zapravljivo v velikih drevesih.

## OnPush — preskoči komponente, ki se ne morajo spremeniti

```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 **preskoči** preverjanje te komponente, razen če se zgodi eno od tega:

```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 lahko dramatično zmanjša količino dela v velikih drevesih — Angular prezre cela podrevesa, za katera ve, da se ne morajo spremeniti.

## Klasična težava: potrebna je nespremenljivost

```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 opira na **spremembe referenc** za vhode, zato morate stanje posodabljati nespremenljivo (novi objekti/nizi). Sprememba na mestu je klasična OnPush napaka — pogled se ne bo posodobil.

## Ročni nadzor

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

## Prihodnost: signali + brez zone

Signali omogočajo še bolj natančne, **fino zrnate** posodobitve (samo pogledi, ki berejo spremenjen signal), kar kaže na pot k odstranitvi Zone.js v celoti.

## Zakaj je to pomembno

Zaznavanje sprememb je osrednjega pomena za zmogljivost Angularja.

Razumevanje, da privzeta strategija preveri celo drevo — in da `OnPush` + nespremenljivi podatki omejita preverjanja na komponente, katerih vhodi so se dejansko spremenili — je glavni vzvod za optimizacijo velikih aplikacij.

Pogoj nespremenljivosti je pogost vir napak »zakaj se moj pogled ne posodablja?«, signali pa predstavljajo smer, kamor Angular gre za še bolj fino zrnato in učinkovitejšo reaktivnost.