Reconciliation Algorithm

React 🟡 Mid

Définition

Algorithme de diffing qui compare deux arbres Virtual DOM pour déterminer les changements minimaux a appliquer au vrai DOM. Complexité O(n) grâce a des heuristiques.

Analogie

Comme un jeu des 7 différences : React compare les deux images et ne corrige que les pixels différents.

Exemple de code

// React compare par type d'element et key
// Si le type change: detruit et recree le sous-arbre
// Si le type est identique: met a jour les props
<ul>
  <li key="a">A</li> {/* key aide la reconciliation */}
  <li key="b">B</li>
</ul>

Cas d'usage

Comprendre la réconciliation aide a écrire du code performant et a bien utiliser les keys.

Anti-pattern

Changer le type d'un composant parent inutilement, forçant React a détruire tout le sous-arbre.

Termes liés

#core#interview#performance

En entretien

Explique-moi l'algorithme de réconciliation.
C'est l'algorithme de diffing qui compare deux arbres Virtual DOM pour déterminer les changements minimaux à appliquer au vrai DOM, avec une complexité O(n) grâce à des heuristiques. Comprendre la réconciliation aide à écrire du code performant et à bien utiliser les keys.
Quel anti-pattern casse la réconciliation ?
Changer le type d'un composant parent inutilement force React à détruire tout le sous-arbre au lieu de le mettre à jour. Les heuristiques de React comparent d'abord le type du composant avant les props.

Fiche mise à jour le 2026-09-27