Come funziona il rilevamento dei cambiamenti in Angular e cosa fa OnPush?

Question

IT Interview Practice · Accepted Answer

**Change detection** è il meccanismo con cui Angular mantiene il DOM sincronizzato con i dati del componente — dopo qualsiasi evento potenzialmente in grado di modificare lo stato, verifica i componenti e aggiorna la vista dove i dati sono cambiati. Per impostazione predefinita questo controllo è ampio; **`OnPush`** lo restringe per motivi di performance.

## Come funziona il rilevamento dei cambiamenti predefinito

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

Per impostazione predefinita (strategia `Default`), Angular ri-verifica **ogni componente** su ogni evento — corretto, ma potenzialmente dispendioso in alberi grandi.

## OnPush — salta i componenti che non possono essere cambiati

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

Con `OnPush`, Angular **salta** il controllo di questo componente a meno che non accada una di queste cose:

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

Questo può ridurre drasticamente il lavoro in alberi grandi — Angular ignora interi sottoalberi che sa non possono essere cambiati.

## L'insidia principale: immutabilità richiesta

```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` si basa su **cambiamenti di riferimento** per gli input, quindi devi aggiornare lo stato in modo immutabile (nuovi oggetti/array). Mutare sul posto è il bug classico di OnPush — la vista non si aggiornerà.

## Controllo manuale

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

## Il futuro: signals + zoneless

I Signals abilitano aggiornamenti ancora più precisi e **granulari** (solo le viste che leggono un signal cambiato), indicando la strada verso l'eliminazione completa di Zone.js.

## Perché è importante

Il rilevamento dei cambiamenti è centrale per la performance di Angular.

Comprendere che la strategia predefinita verifica l'intero albero — e che `OnPush` + dati immutabili limita i controlli ai componenti i cui input sono effettivamente cambiati — è la leva principale per ottimizzare le app grandi.

Il requisito di immutabilità è una fonte frequente di bug "perché la mia vista non si aggiorna?", e i signals rappresentano il percorso che Angular sta intraprendendo per una reattività ancora più granulare ed efficiente.

Come funziona il rilevamento dei cambiamenti predefinito

OnPush — salta i componenti che non possono essere cambiati

L'insidia principale: immutabilità richiesta

Controllo manuale

Il futuro: signals + zoneless

Perché è importante

Domande correlate