🎨
Hooks

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

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 Senior

Regra prática: viu flash visual ao usar useEffect? Troque por useLayoutEffect. Para todo o resto: useEffect.

Perguntas de Entrevista

🔗 Termos do dicionário
17/48