¿Cuáles son las trampas comunes con el arreglo de dependencias y la limpieza de useEffect?

Question

Accepted Answer

Un efecto se vuelve a ejecutar según sus **dependencias**, y equivocarse con ese arreglo es la causa número uno de errores en React.

## Trampa 1: dependencias faltantes → valores obsoletos

Un efecto captura (mediante closure) los valores del render en el que se creó. Si omites una dependencia, sigue usando un valor antiguo:

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

Solución: o bien agrega `count` a las dependencias, o usa un actualizador funcional que no lo necesite (`setCount(c => c + 1)`).

## Trampa 2: dependencias inestables → el efecto se ejecuta en cada render

Los objetos, arreglos y funciones se recrean en cada render, por lo que son "nuevos" cada vez y el efecto nunca se estabiliza:

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

Solución: depende del valor primitivo (`[id]`), o memoriza con `useMemo`/`useCallback`.

## Trampa 3: limpieza olvidada → fugas y condiciones de carrera

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

Sin la limpieza, una petición anterior lenta podría resolverse *después* de una más reciente y sobrescribir datos actualizados (una condición de carrera), y las suscripciones o temporizadores se acumularían. La regla de ESLint `react-hooks/exhaustive-deps` detecta la mayoría de los casos de dependencias faltantes.