Render et Commits

Le rendu, la réconciliation et le commit

Dans React, le rendu est le processus de génération et de mise à jour de l'interface utilisateur en fonction des données, des props et de l'état d'un composant. À chaque changement d’état ou de données, React déclenche un nouveau rendu pour s'assurer que l'interface reste synchronisée avec les informations les plus récentes. Ce rendu est d'abord réalisé sur le Virtual DOM — une copie légère du DOM réel — afin de déterminer les modifications nécessaires. Pour rappel, le DOM (Document Object Model) est la structure en arbre qui représente tous les éléments HTML d’une page web.

Une fois le rendu terminé, React passe à la phase de réconciliation. Durant cette étape, React compare la version actuelle du Virtual DOM avec la précédente pour identifier les différences. Cette analyse permet de cibler uniquement les éléments modifiés, optimisant ainsi les performances en évitant les mises à jour inutiles.

Enfin, dans la phase de commit, les changements détectés sont appliqués au DOM réel. Cette séparation entre rendu virtuel, réconciliation et commit permet à React de ne mettre à jour que ce qui est nécessaire, offrant ainsi une expérience utilisateur fluide et réactive.

Exemple de fonctionnement

Prenons un composant simple avec un texte et un bouton qui change la couleur du texte lorsqu'il est cliqué.

1. Rendu : Au départ, le texte est affiché en noir. Lors du clic sur le bouton, une mise à jour d'état est déclenchée pour passer la couleur de noir à rouge. React génère alors un nouveau rendu du composant dans le Virtual DOM, où le texte apparaît en rouge.

2. Réconciliation : React compare le nouveau Virtual DOM avec l'ancien et note que seule la couleur du texte a changé.

3. Commit : Après la réconciliation, React applique cette modification au DOM réel. Le texte passe alors de noir à rouge à l'écran sans nécessiter le rechargement complet de l'interface.