Mise à jour de l'UI React : phases de rendu et de commit

Processus de mise à jour de l’interface React : du déclencheur au commit

React met à jour l’interface selon une séquence rigoureuse : déclenchement → rendu → commit. Pendant la phase de rendu, React calcule l’arbre virtuel mis à jour sans toucher le DOM réel. La phase de commit applique ensuite les modifications de manière synchrone. Cette séparation permet des optimisations de performance — notamment en mode concurrent, où le rendu peut être interrompu selon la priorité.

Phase de rendu : reconciliation et arbre Fiber

La phase de rendu construit un arbre en cours de traitement basé sur la structure Fiber actuelle. Un Fiber est une liste chaînée de nœuds représentant la hiérarchie des composants. Chaque nœud conserve une référence à sa version précédente via la propriété alternate, facilitant le diff.

La reconciliation compare les nouveaux éléments React (issus de JSX) aux anciens. Des valeurs key stables garantissent un appariement précis, réduisant ainsi les mises à jour inutiles.

Cette phase se divise en deux étapes : beginWork (de haut en bas) et completeWork (de bas en haut) :

• beginWork : vérifie si le rendu est nécessaire (bailout si non), appelle la fonction de rendu, définit des drapeaux (Placement, Update, Deletion) et parcourt récursivement les enfants.
• completeWork : finalise un nœud après avoir traité ses enfants, agrège les drapeaux de sous-arbre pour optimiser le commit.

Les drapeaux de sous-arbre transmettent l'information de changement vers le haut, ignorant les branches propres pendant le commit.

| Drapeau | Description |

|--------|-------------|

| Placement | Insertion d’un nœud DOM |

| Update | Mise à jour des attributs ou du texte |

| Deletion | Suppression d’un élément |

| Ref | Gestion des refs |

| Layout | Planification de useLayoutEffect |

| Passive | Planification de useEffect |

Les drapeaux sont définis pendant le rendu et exécutés lors du commit.

Phase de commit : mutation du DOM

La phase de commit est synchrone et atomique, divisée en trois sous-phases :

• beforeMutation : appelle getSnapshotBeforeUpdate (pour les composants classiques) et nettoie les anciennes refs.
• mutation : applique les drapeaux — insertion, mise à jour ou suppression de nœuds DOM.
• layout : exécute componentDidMount/Update, useLayoutEffect de façon synchrone, met à jour les refs et planifie useEffect.

Après layout, le navigateur reprend le contrôle : recalcul des styles → mise en page/reflow → peinture → composition. React ne s’interpose pas durant ces étapes.

Pipeline du navigateur après le commit

useEffect s’exécute de façon asynchrone, après la peinture — mais pour les événements discrets (clic, touche pressée, saisie), il peut s’exécuter avant la peinture afin de maintenir la réactivité.

Événements discrets :

• clic, keydown, input, submit

Événements continus (scroll, mousemove) s’exécutent toujours après la peinture.

Mode concurrent : rendu interrompable

En mode concurrent, le rendu est divisé en unités de travail prioritaires. Les mises à jour haute priorité (comme la frappe) peuvent interrompre celles de faible priorité (ancien rendu), abandonnant ainsi l’arbre en cours de traitement.

Le commit reste inchangé : synchrone et unique par mise à jour. Cela préserve la cohérence du DOM.

Le rendu peut redémarrer plusieurs fois sans commit si les mises à jour sont abandonnées.

Points clés

• Le rendu calcule les changements en mémoire ; les mutations du DOM n’ont lieu que dans le commit, lorsque des drapeaux sont présents.
• beginWork / completeWork optimisent le parcours grâce au bailout et aux drapeaux de sous-arbre.
• useLayoutEffect s’exécute de façon synchrone après la mutation ; useEffect s’exécute de façon asynchrone après la peinture.
• Le mode concurrent permet d’interrompre le rendu, mais le commit reste indivisible.
• Les key stables sont essentiels pour une reconciliation efficace.

— Editorial Team