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

Question

IT Interview Practice · 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ă.

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

OnPush — sar peste componentele care nu se puteau fi schimbat

Capcana principală: imutabilitate obligatorie

Control manual

Viitorul: signals + zoneless

De ce contează

Întrebări conexe