useLayoutEffect vs useEffect
useLayoutEffect roda ANTES do browser pintar — imprescindível para medir e ajustar o DOM sem flash.
Definição
useLayoutEffect executa síncronamente APÓS o React commit mas ANTES do browser pintar. useEffect executa assíncronamente após o paint. A diferença é crítica para evitar flash visual em manipulações de DOM.
Problema → Solução
Problema
useEffect após o paint causa flash de layout: usuário vê a posição/tamanho errado por um frame.Solução
useLayoutEffect para qualquer leitura + ajuste de DOM que precisa ocorrer antes do usuário ver.Dica de entrevista
Tip
Regra prática: viu flash visual ao usar useEffect? Troque por useLayoutEffect. Para todo o resto: useEffect.Código
useLayoutEffect(() => {
const rect = ref.current.getBoundingClientRect();
setPos({ top: rect.bottom, left: rect.left });
}, [open]);Perguntas de entrevista
Q.useLayoutEffect funciona em SSR?▾
A.Não — não há DOM no servidor. React mostra warning. Use a custom: useIsomorphicLayoutEffect (= useLayoutEffect no client, useEffect no server). Ou simplesmente o componente que usa useLayoutEffect deve ser Client Component.
Q.useLayoutEffect afeta performance?▾
A.Pode bloquear o paint se for muito pesado, causando lag visível. Use só quando necessário e mantenha o código rápido. Para operações longas, prefira useEffect.
Q.Existe equivalente para depois do paint?▾
A.Sim: requestAnimationFrame ou useEffect com setTimeout(0). Útil para tracking, analytics, ou qualquer coisa que não deve bloquear o paint.
Termos relacionados
17/122← →