Aprende a modelar correctamente los estados de una petición HTTP en React para evitar UIs rotas o confusas.
En interfaces reales no basta con 'pedir datos y pintarlos': necesitas gestionar estados intermedios y errores de red de forma explícita.
El patrón base consiste en modelar al menos tres situaciones: carga, éxito y error.
Si omites estos estados, el usuario verá parpadeos, pantallas vacías o mensajes poco claros cuando algo falle.
Con React, la clave es convertir cada estado de red en una representación visual coherente y predecible.
Una petición no es binaria; tiene fases con impacto directo en UX.
Durante `loading` debes mostrar feedback visual para evitar sensación de app congelada.
En `error` conviene mostrar mensaje legible y, si aplica, acción de reintento.
En `success` renderizas datos, pero contemplando también el caso de lista vacía.
El effect arranca la petición cuando el componente monta o cambian dependencias relevantes.
El patrón manual funciona, pero hay trampas habituales.
No cancelar peticiones al desmontar puede provocar actualizaciones sobre componentes ya desmontados.
Duplicar lógica de loading/error en muchas pantallas aumenta deuda técnica.
No cachear respuestas repite llamadas innecesarias y empeora percepción de rendimiento.
Aprende a modelar correctamente los estados de una petición HTTP en React para evitar UIs rotas o confusas.
Código del tema: const { data } = useQuery({ queryKey:["items"] });
Una petición no es binaria; tiene fases con impacto directo en UX.
Durante `loading` debes mostrar feedback visual para evitar sensación de app congelada.
En `error` conviene mostrar mensaje legible y, si aplica, acción de reintento.
En `success` renderizas datos, pero contemplando también el caso de lista vacía.
El effect arranca la petición cuando el componente monta o cambian dependencias relevantes.
import { useEffect, useState } from 'react';
function UsersList() {
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function loadUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error('Error al cargar usuarios');
const data = await res.json();
setUsers(data);
} catch (err) {
setError(err.message);
} finally {
setIsLoading(false);
}
}
loadUsers();
}, []);
if (isLoading) return <p>Cargando...</p>;
if (error) return <p>{error}</p>;
return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}El patrón manual funciona, pero hay trampas habituales.
No cancelar peticiones al desmontar puede provocar actualizaciones sobre componentes ya desmontados.
Duplicar lógica de loading/error en muchas pantallas aumenta deuda técnica.
No cachear respuestas repite llamadas innecesarias y empeora percepción de rendimiento.