Phase de rendu et validation du DOM

Le cycle de travail de React comporte deux phases principales : la phase de rendu et la phase de validation. Pendant la phase de rendu, React appelle les fonctions de vos composants et construit une représentation virtuelle de l’interface utilisateur, l’arbre Fiber. Pendant la phase de validation, React applique les modifications de l’arbre Fiber au DOM réel.

Dans le mode concurrent de React 18, la phase de rendu peut être mise en pause, interrompue ou redémarrée. React peut appeler plusieurs fois la fonction de votre composant avant de valider quoi que ce soit. C’est pourquoi les fonctions de composant doivent être pures : elles ne peuvent pas produire d’effets secondaires, car la fonction peut être exécutée plusieurs fois pour une seule mise à jour visible.

Contrairement à la phase de rendu, la phase de validation est toujours synchrone et s’exécute jusqu’à son terme. React ne peut pas être interrompu pendant qu’il applique les modifications au DOM. Cela garantit que le DOM n’est jamais laissé dans un état partiellement mis à jour. Après chaque validation, les utilisateurs voient toujours une interface cohérente dans son ensemble.

La phase de validation comporte trois sous-phases : avant la mutation (la méthode de composant de classe getSnapshotBeforeUpdate s’exécute ici pour lire les valeurs du DOM avant les modifications), la mutation (React insère, met à jour et supprime les nœuds du DOM) et la mise en page (les effets synchrones sont déclenchés ici, notamment useLayoutEffect et componentDidMount/componentDidUpdate pour les composants de classe).

useEffect est un effet passif, ce qui signifie qu’il ne s’exécute pas pendant la phase de validation. Une fois cette phase terminée et après l’affichage du rendu par le navigateur, React planifie les effets passifs de manière asynchrone. Ils s’exécutent après que le navigateur a eu l’occasion d’afficher le DOM mis à jour à l’écran.

Le navigateur affiche le rendu entre la phase de mise en page, durant laquelle useLayoutEffect s’exécute, et la phase des effets passifs, durant laquelle useEffect s’exécute. C’est la différence essentielle de synchronisation : useLayoutEffect s’exécute avant l’affichage et useEffect après. Cette distinction est particulièrement importante pour les effets qui modifient le résultat visuel.

Si un useEffect lit le DOM et met à jour l’état, par exemple en mesurant un élément et en définissant un état de dimension, React effectue à nouveau le rendu et la validation. Le navigateur affiche alors le rendu deux fois : une première fois avec la dimension initiale, puis une seconde fois avec la dimension corrigée. Les utilisateurs peuvent voir brièvement la mauvaise dimension avant l’apparition de la correction.

React construit en interne un arbre de nœuds « fibre », un par instance de composant. Chaque fibre contient l’état, les effets et la sortie du composant. Pendant la phase de rendu, React crée un nouvel arbre de fibres de travail en cours. Pendant la phase de validation, l’arbre de travail en cours devient l’arbre courant et l’ancien arbre est recyclé.

Le mode strict de React appelle intentionnellement deux fois les fonctions des composants et les effets en développement afin de faciliter la détection des effets secondaires. useLayoutEffect et useEffect sont tous deux montés, démontés, puis remontés. Ce double appel ne se produit pas en production. Il est conçu pour révéler les bogues liés aux effets qui ne sont pas correctement nettoyés.

Comme la phase de rendu peut être interrompue puis relancée, les fonctions de composant doivent produire la même sortie pour les mêmes entrées, sans effets secondaires. Les mutations, les abonnements et les appels d’API placés dans le corps de la fonction, plutôt que dans des effets, s’exécuteront plus souvent que prévu en mode concurrent, ce qui peut provoquer des bogues.

Ne lisez jamais directement les propriétés du DOM dans le corps de la fonction du composant. Le DOM peut ne pas encore exister, notamment lors du rendu côté serveur, ou être obsolète lors des nouveaux rendus. Lisez toujours le DOM dans useLayoutEffect pour les lectures avant la peinture, ou dans useEffect pour les lectures après la peinture, car le DOM y est garanti à jour.

Dans quelle sous-phase de la phase de validation de React useLayoutEffect s’exécute-t-il ?

La phase de rendu de React construit l’arbre de fibres et peut être interrompue ; la phase de validation applique les modifications au DOM et est toujours synchrone. La validation comporte trois sous-phases : avant mutation, mutation et mise en page. useLayoutEffect s’exécute pendant la phase de mise en page, avant la peinture. useEffect s’exécute comme un effet passif après la peinture.