Reconciliation Algorithm

React 🟡 Mid

Definition

Algorithme de diffing qui compare deux arbres Virtual DOM pour determiner les changements minimaux a appliquer au vrai DOM. Complexite O(n) grace a des heuristiques.

Analogie

Comme un jeu des 7 differences : React compare les deux images et ne corrige que les pixels differents.

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 reconciliation aide a ecrire du code performant et a bien utiliser les keys.

Anti-pattern

Changer le type d'un composant parent inutilement, forcant React a detruire tout le sous-arbre.
#core#interview#performance