Gestionar estados de carga y error
Añada variables de estado de carga y error a su componente, muestre un indicador mientras se obtienen datos y presente un mensaje de error claro si falla la operación.
Gestionar estados de carga y error es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Los tres estados de los datos asíncronos
Cualquier operación asíncrona con datos tiene tres estados: carga (solicitud en curso), éxito (datos recibidos) y error (solicitud fallida). La interfaz debe gestionar los tres de forma explícita.
Interfaz de carga
Mientras se cargan los datos, muestre un indicador giratorio, un esqueleto o un marcador de posición. Evite que se vuelva a enviar el formulario deshabilitando los botones durante la carga. El usuario debe saber siempre que la aplicación está funcionando.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Interfaz de error
Muestre un mensaje de error claro cuando falle una solicitud. Incluya una acción para reintentar, de modo que los usuarios no se queden bloqueados. Registre el error completo para los desarrolladores.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Mecanismo de reintento
Incremente un contador de reintentos en el estado y añádalo al array de dependencias del efecto. Cuando el usuario haga clic en Reintentar, el contador cambiará y volverá a activar el efecto.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Buenas prácticas para el estado de carga
1) Muestre el estado de carga inmediatamente al iniciar la solicitud. 2) Mantenga el estado de carga al mínimo: no lo restablezca si hay datos en caché disponibles. 3) En la paginación, distinga entre la carga inicial y la carga de más elementos. 4) No muestre nunca un indicador giratorio durante menos de 100 ms: añada un retraso o mantenga visibles los datos anteriores.
Actualizaciones optimistas
Las actualizaciones optimistas actualizan la interfaz inmediatamente, antes de que el servidor lo confirme, y revierten el cambio si la solicitud falla. Esto transmite una sensación de respuesta instantánea.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Límites de error para errores de renderizado
Use límites de error, es decir, componentes de clase con componentDidCatch, para capturar los errores producidos durante el renderizado. Muestran una interfaz alternativa en lugar de bloquear toda la aplicación.
Asignación de errores HTTP
Asigne los códigos de estado HTTP a mensajes comprensibles para el usuario. 401 → redirigir al inicio de sesión. 403 → mostrar «Acceso denegado». 404 → «No encontrado». 429 → «Demasiadas solicitudes; espere». 500+ → «Error del servidor; inténtelo de nuevo».
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer para estados complejos de obtención de datos
Cuando la carga, el error y los datos interactúan, por ejemplo, al borrar el error durante una nueva carga, un reducer resulta más claro que varias llamadas a useState.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense: el futuro
React Suspense, junto con frameworks de obtención de datos como React Query, Relay y Next.js, permite que los componentes se «suspendan» mientras esperan los datos. Un límite Suspense superior muestra automáticamente una interfaz alternativa. Esta es la dirección hacia la que avanza React.
Error de red frente a error del servidor
Los errores de red, como la falta de conexión o CORS, generan una excepción en el bloque catch. Los errores del servidor, como 4xx o 5xx, se resuelven normalmente: debe comprobar res.ok para detectarlos. La gestión de errores debe contemplar ambas categorías.
Comprobación rápida
¿Qué es una «actualización optimista»?
Resumen: estados de carga y error
Gestione siempre los estados de carga, éxito y error. Muestre una interfaz de carga significativa. Asigne los errores HTTP a mensajes comprensibles para el usuario. Implemente mecanismos de reintento. Use actualizaciones optimistas para ofrecer una respuesta percibida como instantánea. Use useReducer para coordinar el estado de obtención de datos. Suspense simplificará aún más este patrón con el tiempo.
Preguntas frecuentes
¿La lección «Gestionar estados de carga y error» es gratis?
Sí — el texto completo de «Gestionar estados de carga y error» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Gestionar estados de carga y error»?
Añada variables de estado de carga y error a su componente, muestre un indicador mientras se obtienen datos y presente un mensaje de error claro si falla la operación. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Gestionar estados de carga y error»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de useEffect: dependencias y limpieza
- Obtener datos al montar el componente
- Gestionar estados de carga y error
- AbortController para la limpieza