Le cycle commence quand quelque chose change : un appel à setState, de nouvelles props, ou une mise à jour de contexte. React planifie alors un re-rendu du composant concerné.
COMPOSANT — Compteur.tsx
Score : 0
↓setScore(1) appelé !
État (State)
score0→1
Les 3 déclencheurs de rendu
setState / useState
L'état interne du composant change
Nouvelles props
Le composant parent se re-rend et transmet de nouvelles valeurs
Contexte
Un useContext dont la valeur a changé
React ne modifie pas le DOM immédiatement. Il planifie un rendu, qui sera exécuté lors du prochain cycle.
Étape 2 sur 5
Render & Virtual DOM
React appelle la fonction du composant pour obtenir le JSX. Ce JSX est transformé en une représentation légère en mémoire : le Virtual DOM. Le vrai DOM n'est pas encore touché.
Compteur()
→
JSX retourné
→
React.createElement(…)
→
Virtual DOM (en mémoire)
ANCIEN Virtual DOM
(score = 0)
<div>
<p>Score : 0</p>
<button onClick>+1</button>
</div>
⟹
NOUVEAU Virtual DOM
(score = 1)
<div>
<p>Score : 1</p>
<button onClick>+1</button>
</div>
« Rendre » un composant = appeler sa fonction. Cela ne modifie pas le vrai DOM. Si le JSX retourné est identique à l'ancien, React ne changera rien.
Étape 3 sur 5
Réconciliation & Diffing
React compare le nouveau Virtual DOM avec l'ancien pour identifier uniquement les nœuds qui ont réellement changé. C'est l'algorithme de diffing. Seules les différences seront transmises au DOM réel.
Nœud
Avant
Après
Action
<div> racine
<div>
<div>
SKIP
<p> texte
"Score : 0"AVANT
"Score : 1"APRÈS
UPDATE
<button>
onClick, "+1"
onClick, "+1"
SKIP
UPDATE — nœud modifié, sera appliqué au DOM
SKIP — nœud identique, ignoré
Sur 3 nœuds comparés, 1 seul changement est détecté. Seul ce nœud sera mis à jour dans le vrai DOM — c'est ce qui rend React performant.
Étape 4 sur 5
Commit au DOM réel
React applique uniquement les différences identifiées au vrai DOM du navigateur. C'est la seule étape qui touche réellement le DOM. Les useEffect sont exécutés après cette phase.
VRAI DOM (navigateur)
└─<div>
├─<p>"Score : 0"
└─<button>"+1"
1
React prépare la liste des mutations à effectuer
2
Le nœud <p> est ciblé dans le vrai DOM
3
textContent est mis à jour : "Score : 0" → "Score : 1"
4
Les useEffect sont déclenchés après la mise à jour du DOM
Étape 5 sur 5
Résumé du cycle complet
Voici le cycle complet de rendu React. Cliquez sur une étape pour y retourner.
1. DéclencheursetState, nouvelles props, ou mise à jour de contexte planifient un re-rendu
↓
2. Render & Virtual DOMLa fonction du composant est appelée, produit un nouveau Virtual DOM en mémoire
↓
3. Diffing & RéconciliationReact compare les deux Virtual DOM et identifie les différences minimales
↓
4. CommitSeules les différences sont appliquées au vrai DOM — puis les useEffect s'exécutent