Comment choisir une approche de gestion d'état dans React?

Question

Accepted Answer

Adaptez l'outil au **type** d'état, plutôt que de recourir par défaut à un store global. La plupart des problèmes de « state global » sont en réalité dus au mauvais outil pour le job.

## Pourquoi c'est important

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## L'insight le plus important : server state ≠ client state

Les données d'une API sont un **cache** de données distantes, pas un état que vous possédez. Les mettre dans Redux signifie gérer manuellement le chargement, la mise en cache, le rechargement et l'invalidation — fastidieux et source de bugs. Une bibliothèque de server state gère tout cela :

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Directives

- Gardez l'état aussi **local** que possible ; colocalisez-le près du lieu d'utilisation.
- Ne mettez pas de valeurs qui changent rapidement dans **Context** (cela re-rend tous les consommateurs).
- Pour l'état client partagé avec des mises à jour fréquentes, préférez un store avec des **abonnements sélectifs** (Zustand/Jotai) afin que les composants ne se re-rendent que pour la portion qu'ils lisent.
- Utilisez Redux Toolkit lorsque vous avez besoin de ses devtools/middleware/structure pour un véritable état partagé complexe.

La vraie compétence est de **minimiser et placer correctement** l'état — pas de choisir une bibliothèque.