Qual é a diferença entre useEffect e useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

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.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## Por que isso importa

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:

```jsx
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.

## Por que você não deveria recorrer a ele por padrão

- Ele **bloqueia a pintura**: trabalho pesado em `useLayoutEffect` faz a UI parecer travada, porque o navegador não consegue pintar até que termine.
- Ele **avisa durante SSR** (não consegue executar no servidor, onde não há layout).

**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.

Por que isso importa

Por que você não deveria recorrer a ele por padrão

Perguntas relacionadas