Comment récupérez-vous les données dans React et évitez-vous les race conditions ?

Question

Accepted Answer

L'approche de base utilise `useEffect`, mais vous devez gérer le **cleanup** et les **réponses hors d'ordre**, sinon vous obtiendrez des données obsolètes et des avertissements.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## Pourquoi c'est important

Supposons que `id` change rapidement de `1` à `2`. Sans annulation, les deux requêtes sont en cours. Si la requête `1` est lente et se résout **après** la requête `2`, vous afficheriez les données de l'utilisateur `1` pour l'utilisateur `2` :

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

L'annulation de la requête précédente (cleanup) résout ce problème. Un ancien motif de drapeau booléen (`let active = true; ... if (active) setUser(...)`) réalise la même chose en ignorant les réponses obsolètes.

## Dans les vraies applications, utilisez une bibliothèque

La récupération manuelle devient répétitive et omet la mise en cache/les tentatives. **React Query (TanStack Query)** ou **SWR** gèrent les états de chargement/erreur, la mise en cache, la déduplication, la récupération en arrière-plan et stale-while-revalidate pour vous :

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Avec des frameworks comme Next.js, les chargeurs de données côté serveur sont souvent préférables.