useLayoutEffect

Définition

Identique a useEffect mais s'exécute de manière synchrone après les mutations DOM et avant que le navigateur ne peigne. Bloque le rendu visuel.

Analogie

Comme repositionner les meubles avant de prendre la photo : tout est en place avant que l'utilisateur ne voie.

Exemple de code

useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipPos(height + 10);
}, []);

Cas d'usage

Mesurer le DOM (position, taille) ou corriger un layout avant l'affichage pour éviter un flash visuel.

Anti-pattern

Termes liés