Quais são as armadilhas comuns com o array de dependência useEffect e limpeza?

Question

Accepted Answer

Um efeito é executado novamente com base em suas **dependências**, e acertar essa array errado é a #1 fonte de bugs React.

## Por que isso importa

Um efeito fecha sobre os valores da renderização em que foi criado. Se você omitir uma dependência, ele continua usando uma antiga:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Solução: adicione `count` às deps, ou use um updater funcional que não o exija (`setCount(c => c + 1)`).

## Armadilha 2: dependências instáveis → efeito é executado a cada renderização

Objetos/arrays/funções são recriados em cada renderização, então são "novos" a cada vez e o efeito nunca se estabiliza:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Solução: dependa do primitivo (`[id]`), ou memoize com `useMemo`/`useCallback`.

## Armadilha 3: limpeza esquecida → vazamentos e condições de corrida

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Sem a limpeza, uma solicitação anterior mais lenta poderia resolver *após* uma mais nova e sobrescrever dados frescos (uma condição de corrida), e assinaturas/timers se acumulariam. A regra ESLint `react-hooks/exhaustive-deps` captura a maioria dos casos de dependência ausente.