Pourquoi mon `useEffect` s'exécute deux fois en développement ?

Question

Mon `useEffect(() => { fetchData(); }, [])` est appelé deux fois : je vois deux requêtes dans l'onglet Réseau. C'est un bug ?

Accepted Answer

Non, c'est voulu. En **mode développement**, `<StrictMode>` monte, démonte puis remonte chaque composant pour vérifier que tes effets se nettoient correctement. En production, l'effet ne s'exécute qu'une fois.

La bonne réaction n'est pas de désactiver StrictMode, mais d'écrire un effet qui supporte ça :

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch('/api/data', { signal: ctrl.signal })
    .then(r => r.json())
    .then(setData)
    .catch(e => { if (e.name !== 'AbortError') setError(e); });
  return () => ctrl.abort();
}, []);
```

Encore mieux : pour charger des données, utilise un Server Component (Next.js) ou une bibliothèque comme TanStack Query. Elles gèrent le cache et la déduplication.

2 réponses