Quelles sont les pièges courants du tableau de dépendances useEffect et du nettoyage ?

Question

Accepted Answer

Un effet s'exécute à nouveau en fonction de ses **dépendances**, et mal configurer ce tableau est la source #1 des bugs React.

## Pitfall 1 : dépendances manquantes → valeurs obsolètes

Un effet capture les valeurs du rendu dans lequel il a été créé. Si vous omettez une dépendance, il continue d'utiliser une ancienne valeur :

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

Correction : soit ajoutez `count` à deps, soit utilisez une fonction de mise à jour qui n'en a pas besoin (`setCount(c => c + 1)`).

## Pitfall 2 : dépendances instables → l'effet s'exécute à chaque rendu

Les objets/tableaux/fonctions sont recréés à chaque rendu, donc ils sont "nouveaux" à chaque fois et l'effet n'a jamais le temps de se stabiliser :

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

Correction : dépendez de la valeur primitive (`[id]`), ou mémoïsez avec `useMemo`/`useCallback`.

## Pitfall 3 : nettoyage oublié → fuites et race conditions

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

Sans nettoyage, une requête antérieure plus lente pourrait se résoudre *après* une plus récente et écraser les données fraîches (une race condition), et les abonnements/minuteurs s'accumuleraient. La règle ESLint `react-hooks/exhaustive-deps` détecte la plupart des cas de dépendances manquantes.