Qu'est-ce que useEffect et quand s'exécute-t-il ?

Question

Accepted Answer

`useEffect` exécute des **effets secondaires** — un travail qui dépasse le rendu de React, comme la récupération de données, les abonnements, les minuteries ou les mises à jour DOM manuelles. Il s'exécute **après** que le composant soit rendu, en gardant les effets secondaires en dehors du corps de rendu (le rendu doit rester pur).

## Pourquoi c'est important

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

- **`[count]`** → s'exécute après le premier rendu et chaque fois que `count` change.
- **`[]`** (vide) → s'exécute **une fois** après le montage (bon pour une configuration unique).
- **omis** → s'exécute après **chaque** rendu (rarement ce que vous voulez).

## Nettoyage : retourner une fonction

Si un effet configure quelque chose qui doit être démantelé, retournez une fonction de nettoyage. React l'appelle avant la prochaine exécution de l'effet et lors du démontage du composant :

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

## Pourquoi le nettoyage est important

Sans elle, chaque ré-exécution ajouterait une autre minuterie/abonnement et ne supprimerait jamais l'ancienne — une fuite mémoire classique. Le cycle de vie d'un effet `[dep]` est : *exécuter l'effet → (dep change) → exécuter le nettoyage → exécuter l'effet à nouveau*.

**Conseil :** n'utilisez pas les effets pour les choses que vous pouvez calculer pendant le rendu (dérivez les valeurs à la place), et incluez chaque valeur que l'effet lit dans le tableau de dépendances (la règle lint `react-hooks/exhaustive-deps` aide).