useLayoutEffect

React 🟡 Mid

Definition

Identique a useEffect mais s'execute de maniere synchrone apres 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 eviter un flash visuel.

Anti-pattern

Utiliser useLayoutEffect par defaut au lieu de useEffect, bloquant inutilement le rendu.

Termes lies

#hooks#performance#dom