Ambos executam efeitos, mas em momentos diferentes em relação à pintura do navegador — e essa diferença de timing é o ponto principal.
useEffect executa depois que o navegador já pintou. É assíncrono e não-bloqueante. Use para quase tudo (dados, subscrições, logging).useLayoutEffect executa sincronamente depois que o DOM é mutado, mas ANTES do navegador pintar. Use quando você precisa ler o layout e mudar o DOM no mesmo frame para evitar uma oscilação visível.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Imagine medir um elemento e reposicionar um tooltip baseado em seu tamanho. Com useEffect, o usuário veria brevemente o tooltip no lugar errado, depois ele pula:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Com useEffect, o mesmo código executa depois da pintura → uma oscilação de um frame.
useLayoutEffect faz a UI parecer travada, porque o navegador não consegue pintar até que termine.Regra de ouro: use useEffect por padrão; só use useLayoutEffect para medições/mutações síncronas do DOM que de outro modo oscilariam.