Quand useLayoutEffect s’exécute par rapport à useEffect

useLayoutEffect s’exécute de manière synchrone immédiatement après que React a appliqué les mutations au DOM, mais avant que le navigateur ait eu la possibilité de peindre ces modifications. Du point de vue du navigateur, l’effet de mise en page et les mutations du DOM font partie du même bloc de travail synchrone et ininterrompu.

useEffect s’exécute de manière asynchrone après que le navigateur a terminé sa peinture. L’utilisateur voit d’abord l’interface mise à jour, puis l’effet s’exécute. Cela rend useEffect moins perturbateur pour les performances du rendu, mais signifie que toute modification visible causée par l’effet entraînera un second cycle de peinture.

Vous pouvez vérifier cette différence de moment d’exécution en journalisant les horodatages dans les deux effets : ajoutez console.log('layout', Date.now()) dans useLayoutEffect et console.log('passive', Date.now()) dans useEffect. Dans la console, l’horodatage de l’effet de mise en page sera toujours antérieur à celui de l’effet passif, ce qui confirme l’ordre d’exécution.

Si un useEffect met à jour un état qui influence l’affichage visuel, l’utilisateur voit deux rendus : le rendu initial avec un état obsolète, puis le rendu corrigé après l’exécution de l’effet. Cela se manifeste par un clignotement visible ou une redistribution de la mise en page. useLayoutEffect évite ce problème, car ses mises à jour d’état sont validées avant que le navigateur ne peigne quoi que ce soit.

Si vous appelez setState dans un useLayoutEffect, React exécute immédiatement un nouveau cycle de rendu et de validation avant la peinture. Le navigateur ne peint que le résultat final : l’utilisateur ne voit jamais l’état intermédiaire. C’est le principal cas d’utilisation de useLayoutEffect : mesurer le DOM, calculer une nouvelle valeur, mettre à jour l’état et garantir une seule peinture nette.

Comme useLayoutEffect s’exécute de manière synchrone avant la peinture et peut déclencher des rendus supplémentaires, une utilisation excessive peut nuire aux performances. Si le travail synchrone est lourd, il empêche le navigateur de peindre et provoque des saccades visibles. Utilisez-le uniquement lorsque vous devez empêcher un clignotement visuel ; utilisez useEffect dans tous les autres cas.

En mode strict de React, uniquement en développement, useLayoutEffect et useEffect sont tous deux appelés deux fois par montage. La séquence est la suivante : montage, nettoyage, puis nouveau montage. Cela aide à détecter les effets qui ne sont pas correctement nettoyés. Le double appel ne se produit pas dans les versions de production.

Le choix par défaut doit toujours être useEffect. Ne passez à useLayoutEffect que si vous pouvez observer et reproduire un clignotement visuel ou un problème de mise en page incorrecte. Une utilisation excessive de useLayoutEffect bloque inutilement la chaîne de peinture du navigateur et peut dégrader les performances perçues.

useLayoutEffect ne peut pas s’exécuter sur le serveur, car il n’y a ni DOM ni cycle de peinture du navigateur dans un environnement serveur. S’il est utilisé dans un composant rendu sur le serveur, React émet un avertissement. Pour corriger cela, ignorez conditionnellement l’effet : vérifiez typeof window !== 'undefined' ou utilisez useEffect pour un code compatible avec SSR.

Posez-vous la question suivante : « Cet effet modifie-t-il quelque chose que l’utilisateur verra dès la toute première peinture ? » Si oui, utilisez useLayoutEffect pour empêcher un clignotement. Sinon — pour la récupération de données, les abonnements, l’analyse, la journalisation et la plupart des autres effets secondaires — utilisez useEffect. Ce cadre décisionnel couvre la majorité des cas réels.

useLayoutEffect s’exécute dans le même bloc synchrone que les mutations du DOM. React ne peut traiter aucun autre travail, comme répondre aux événements utilisateur, pendant l’exécution d’un useLayoutEffect. C’est pourquoi celui-ci doit être rapide et ciblé. Un code synchrone de longue durée dans useLayoutEffect retarde directement l’affichage du navigateur à l’écran.

À quel moment précis useLayoutEffect s’exécute-t-il par rapport aux mutations du DOM et à la peinture du navigateur ?

useLayoutEffect est synchrone et s’exécute avant la peinture du navigateur, ce qui le rend adapté à la mesure du DOM et aux corrections visuelles. useEffect s’exécute après la peinture et constitue le bon choix pour la récupération de données, les abonnements et la plupart des effets secondaires. Utilisez useEffect par défaut et ne passez à useLayoutEffect que si un clignotement visuel confirme qu’il est nécessaire. Évitez-le avec SSR sans protections.