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.
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.