useLayoutEffect pour les mesures avant animation

Il arrive qu'un élément saute ou scintille visiblement lors de son premier affichage avant de se stabiliser. Cela se produit généralement lorsque vous mesurez ou repositionnez un élément après que le navigateur l'a déjà affiché.

L'utilisateur voit la mauvaise position pendant une image, puis une correction soudaine, ce qui donne une impression de dysfonctionnement.

useEffect s'exécute après le rendu du navigateur. Ainsi, si vous lisez une mesure et mettez à jour le DOM dans useEffect, l'utilisateur a déjà vu l'image non corrigée avant que votre modification ne soit appliquée.

Pour un positionnement visuel qui doit être invisible pour l'utilisateur, une exécution après le rendu arrive trop tard.

useLayoutEffect s'exécute de manière synchrone après que React a modifié le DOM, mais avant que le navigateur n'effectue le rendu. Toute lecture ou écriture du DOM que vous y effectuez est prise en compte avant que l'utilisateur ne voie la moindre image.

C'est donc l'outil adapté aux mesures et au positionnement qui doivent sembler immédiatement corrects.

Dans useLayoutEffect, vous pouvez lire la disposition d'un élément avec ref.current.getBoundingClientRect() afin d'en relever la position et la taille avant de l'animer.

Comme cela s'exécute avant le rendu, vous pouvez à la fois mesurer l'élément et appliquer une transformation initiale sans aucun flash visible.

FLIP signifie Première position, Dernière position, Inversion et Lecture. Vous relevez la position initiale de l'élément, le laissez se déplacer vers sa position finale, puis vous l'inversez en appliquant une transformation qui le remet visuellement à sa position initiale, avant de lancer la lecture en supprimant la transformation pour qu'il s'anime vers sa position finale.

Cela vous permet d'animer les changements de disposition en utilisant uniquement la propriété peu coûteuse transform, même si la disposition réelle a changé instantanément.

Les lectures essentielles ont lieu dans useLayoutEffect : relevez le rectangle initial avant la modification et le rectangle final après celle-ci, puis calculez l'écart. Effectuer cette opération avant le rendu garantit que la transformation d'inversion est en place avant que quoi que ce soit ne soit affiché.

La différence entre les deux rectangles vous donne les valeurs exactes de translation et de mise à l'échelle nécessaires pour l'inversion.

Vous définissez la transformation d'inversion de manière synchrone dans useLayoutEffect, puis vous la supprimez à l'image suivante afin que l'élément s'anime vers son emplacement naturel. Vous déclenchez souvent cette étape de lecture avec requestAnimationFrame.

Comme l'inversion a été appliquée avant le rendu, l'utilisateur ne voit jamais l'élément dans sa position finale brute.

Sur le serveur, il n'y a pas de DOM ; React consigne donc un avertissement indiquant que useLayoutEffect ne fait rien pendant le rendu côté serveur. Les effets de disposition n'ont de sens que dans le navigateur.

Cet avertissement signale que l'effet ne peut pas s'exécuter lorsqu'il n'y a rien à mesurer.

Si un composant doit s'exécuter sur le serveur, utilisez useEffect avec requestAnimationFrame pour effectuer votre mesure avant le rendu suivant, ou utilisez useLayoutEffect de manière conditionnelle uniquement dans le navigateur.

Cela évite l'avertissement tout en offrant une synchronisation proche de l'exécution avant rendu pour les animations non critiques.

Une animation de hauteur est un cas classique : mesurez les hauteurs réduite et étendue dans useLayoutEffect, puis animez entre des valeurs en pixels explicites afin que la transition soit fluide.

Comme une hauteur auto ne peut pas être animée, mesurer d'abord la hauteur réelle permet d'effectuer la transition vers une valeur concrète.

Par défaut, utilisez useEffect pour la plupart des tâches. Utilisez useLayoutEffect uniquement lorsque vous lisez la disposition et devez modifier le DOM avant le rendu pour éviter un flash visible.

Une utilisation excessive peut nuire aux performances, car elle bloque le rendu jusqu'à sa fin.

Évaluez votre compréhension du moment d'exécution des effets.

Vous avez appris que le problème du flash vient d'une mesure effectuée après le rendu, que useLayoutEffect s'exécute avant le rendu, et comment la technique FLIP anime les changements de disposition avec des transformations peu coûteuses.

Vous avez également vu l'avertissement SSR et une solution de repli combinant useEffect et requestAnimationFrame.