O que é useEffect e quando ele é executado?

Question

Accepted Answer

`useEffect` executa **efeitos colaterais** — trabalho que sai fora da renderização do React, como busca de dados, subscrições, timers ou atualizações manuais de DOM. Ele é executado **após** o componente renderizar, mantendo efeitos colaterais fora do corpo de renderização (a renderização deve permanecer pura).

## Por que isso importa

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → executa após a primeira renderização e sempre que `count` muda.
- **`[]`** (vazia) → executa **uma vez** após a montagem (bom para configuração única).
- **omitida** → executa após **toda** renderização (raramente o que você quer).

## Limpeza: retorne uma função

Se um efeito configura algo que precisa ser desfeito, retorne uma função de limpeza. React a chama antes da próxima execução do efeito e quando o componente é desmontado:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Por que a limpeza é importante

Sem ela, cada re-execução adicionaria outro timer/subscrição e nunca removeria o antigo — um vazamento de memória clássico. O ciclo de vida para um efeito `[dep]` é: *executa efeito → (dep muda) → executa limpeza → executa efeito novamente*.

**Dica:** não use efeitos para coisas que você pode computar durante a renderização (derive valores em vez disso) e inclua cada valor que o efeito lê na matriz de dependências (a regra de lint `react-hooks/exhaustive-deps` ajuda).