Quali sono le insidie comuni con l'array di dipendenze useEffect e la pulizia?

Question

Accepted Answer

Un effetto si riesegue in base alle sue **dipendenze**, e sbagliare questo array è la fonte #1 di bug in React.

## Insidia 1: dipendenze mancanti → valori obsoleti

Un effetto cattura i valori dal render in cui è stato creato. Se ometti una dipendenza, continua a usare quella vecchia:

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

Soluzione: aggiungi `count` a deps, oppure usa un updater funzionale che non ne ha bisogno (`setCount(c => c + 1)`).

## Insidia 2: dipendenze instabili → l'effetto si esegue ad ogni render

Oggetti/array/funzioni vengono ricreati ad ogni render, quindi sono "nuovi" ogni volta e l'effetto non si stabilizza mai:

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

Soluzione: dipendi dalla primitiva (`[id]`), oppure memoizza con `useMemo`/`useCallback`.

## Perché è importante

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

Senza pulizia, una richiesta precedente più lenta potrebbe risolversi *dopo* una più recente e sovrascrivere dati freschi (una race condition), e le sottoscrizioni/timer si accumulerebbero. La regola ESLint `react-hooks/exhaustive-deps` cattura la maggior parte dei casi di dipendenza mancante.