Comment fonctionne la détection de changements dans Angular, et à quoi sert OnPush ?

Question

Accepted Answer

**La détection de changements** est le mécanisme par lequel Angular maintient le DOM en synchronisation avec les données des composants — après tout événement potentiellement modificateur d'état, il vérifie les composants et met à jour la vue où les données ont changé. Par défaut, cette vérification est large ; **`OnPush`** la restreint pour des raisons de performance.

## Comment fonctionne la détection de changements par défaut

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

Par défaut (stratégie `Default`), Angular re-vérifie **chaque composant** à chaque événement — correct, mais potentiellement inefficace dans les grands arbres.

## OnPush — ignorer les composants qui ne peuvent pas avoir changé

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

Avec `OnPush`, Angular **ignore** la vérification de ce composant à moins qu'une de ces situations ne se produise :

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

Cela peut réduire considérablement le travail dans les grands arbres — Angular ignore les sous-arbres entiers qu'il sait ne pouvoir avoir changé.

## Le piège principal : l'immutabilité requise

```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` repose sur les **changements de référence** pour les inputs, donc vous devez mettre à jour l'état de façon immuable (nouveaux objets/tableaux). Muter sur place est le bug classique de OnPush — la vue ne se mettra pas à jour.

## Contrôle manuel

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

## L'avenir : signals + sans zone

Les signals permettent des mises à jour encore plus précises et **granulaires** (uniquement les vues lisant un signal modifié), pointant vers la suppression complète de Zone.js.

## Pourquoi c'est important

La détection de changements est centrale pour la performance d'Angular.

Comprendre que la stratégie par défaut vérifie tout l'arbre — et que `OnPush` + données immuables limitent les vérifications aux composants dont les inputs ont réellement changé — est le principal levier pour optimiser les grandes applications.

L'exigence d'immuabilité est une source fréquente de bugs « pourquoi ma vue ne se met-elle pas à jour ? », et les signals représentent la direction vers laquelle Angular se dirige pour une réactivité encore plus granulaire et efficace.