¿Cómo modelar el estado asincrónico/de carga?

Question

Accepted Answer

Las operaciones asincrónicas (llamadas a API) tienen múltiples resultados posibles, por lo que debes modelar **más que solo los datos** — necesitas representar estados de carga, éxito y error. Modelar esto bien previene bugs de UI como mostrar datos obsoletos o sin retroalimentación. ## El enfoque ingenuo y sus defectos ```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. ``` Las banderas independientes permiten combinaciones contradictorias (cargando *y* error *y* datos al mismo tiempo) que deberían ser imposibles — una fuente de bugs de UI confusos. ## Mejor: un enum de estado (una pequeña máquina de estados) ```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 único campo `status` hace que los estados sean **mutuamente excluyentes** — no puedes estar tanto cargando como con error. El renderizado se convierte en un switch limpio: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## No olvides los estados frecuentemente pasados por alto ```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) ``` ## El mejor enfoque para datos del servidor: usa una librería ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Las librerías de estado del servidor proporcionan estos estados (más caching, refetch, stale-while-revalidate) de forma nativa — generalmente mejor que hacer algo personalizado. ## Por qué es importante Modelar correctamente el estado asincrónico — como un único status en lugar de booleanos sueltos — elimina una clase completa de bugs de UI (estados contradictorios, retroalimentación de carga/error/vacío faltante) y hace que la lógica de renderizado sea limpia y exhaustiva. Reconocer el conjunto completo de estados (idle, loading, success, error, empty, refetching) lleva a mejor UX, y saber que las librerías de estado del servidor manejan todo esto es lo que mantiene el código de obtención de datos simple y robusto.