Cum funcționează detecția de modificări în Angular și ce face OnPush?

Question

Accepted Answer

**Change detection** este modul în care Angular menține DOM-ul sincronizat cu datele componentei — după orice eveniment care ar putea modifica starea, aceasta verifică componentele și actualizează vizualizarea acolo unde datele s-au schimbat. În mod implicit, această verificare este lată; **`OnPush`** o restrânge pentru performanță.

## Cum funcționează detecția de modificări implicită

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

Implicit (strategia `Default`), Angular reverifică **fiecare componentă** la fiecare eveniment — corect, dar potențial risipitor în copaci mari.

## OnPush — sar peste componentele care nu se puteau fi schimbat

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

Cu `OnPush`, Angular **sare** peste verificarea acestei componente decât dacă se întâmplă una dintre acestea:

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

Aceasta poate reduce dramatic munca în copaci mari — Angular ignoră subcopaci întregi pe care știe că nu s-au putut schimba.

## Capcana principală: imutabilitate obligatorie

```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 bazează pe **schimbări de referință** pentru intrări, deci trebuie să actualizați starea imutabil (obiecte/matrice noi). Mutarea în loc este greșeala clasică a OnPush — vizualizarea nu se va actualiza.

## Control manual

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

## Viitorul: signals + zoneless

Semnalele permit actualizări și mai precise și **granulare** (doar vizualizările care citesc un semnal modificat), îndreptate spre eliminarea completă a Zone.js.

## De ce contează

Detecția de modificări este centrală pentru performanța Angular.

Înțelegerea că strategia implicită verifică întregul copac — și că `OnPush` + date imutabile limitează verificările doar la componentele ale căror intrări s-au schimbat efectiv — este pârghia principală pentru optimizarea aplicațiilor mari.

Cerința de imutabilitate este o sursă frecventă de erori "de ce nu se actualizează vizualizarea mea?", iar semnalele reprezintă direcția în care se îndreaptă Angular pentru reactivitate și mai granulară și mai eficientă.