Comment modélisez-vous l'état async/chargement ?

Question

Accepted Answer

Les opérations asynchrones (appels API) ont plusieurs résultats possibles, vous devez donc modéliser **plus que simplement les données** — vous devez représenter les états de chargement, succès et erreur. Bien modéliser cela prévient les bugs UI comme afficher des données obsolètes ou aucun retour. ## The naive approach and its flaws ```js // ❌ separate booleans — can represent impossible combinations const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // What does { loading: true, error: "x", data: [...] } even mean? An invalid state. ``` Des flags indépendants permettent des combinaisons contradictoires (chargement *et* erreur *et* données à la fois) qui devraient être impossibles — une source de bugs UI confus. ## Better: a status enum (a small state machine) ```js // ✅ a single `status` makes states mutually exclusive const [state, setState] = useState({ status: "idle", data: null, error: null }); // status is one of: 'idle' | 'loading' | 'success' | 'error' async function load() { setState({ status: "loading", data: null, error: null }); try { const data = await api.get(); setState({ status: "success", data, error: null }); } catch (e) { setState({ status: "error", data: null, error: e.message }); } } ``` Un seul champ `status` rend les états **mutuellement exclusifs** — vous ne pouvez pas être à la fois en chargement et en erreur. Le rendu devient un switch propre : ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Don't forget the often-missed states ```text idle — hasn't started yet (vs loading) empty — succeeded but no results (show "No items" not a blank screen) refetching— has old data AND is loading new (show data + a subtle spinner) ``` ## The best approach for server data: use a library ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Les bibliothèques de server-state fournissent ces états (plus caching, refetch, stale-while-revalidate) clé en main — généralement mieux que de les implémenter soi-même. ## Pourquoi c'est important Bien modéliser l'état async — comme un seul status plutôt que des booléens éparpillés — élimine toute une classe de bugs UI (états contradictoires, retour manquant de chargement/erreur/vide) et rend la logique de rendu propre et exhaustive. Reconnaître l'ensemble complet des états (idle, loading, success, error, empty, refetching) conduit à une meilleure UX, et savoir que les bibliothèques de server-state gèrent tout cela est ce qui maintient le code de data-fetching simple et robuste.