Buenas prácticas para manejar estados de carga (loading) y errores en UI

Baking

En mis aplicaciones de React, a menudo me encuentro escribiendo lógica como esta para peticiones a una API:

if (isLoading) return ;
if (error) return ;
return ;

Funciona, pero cuando tienes muchas peticiones en una misma página, el código se llena de estos condicionales. ¿Existen patrones o librerías que ayuden a gestionar esto de una forma más limpia y centralizada? ¿Cómo lo hacéis vosotros para no repetir tanto código?

Folk

Una solución muy popular para esto es usar una librería de "server state" como React Query (ahora TanStack Query) o SWR. Estas librerías se encargan de todo el ciclo de vida de la petición por ti: fetching, caching, re-fetching en segundo plano, y te dan hooks que ya incluyen los estados de isLoading, isError, data, etc.

Te simplifica el código una barbaridad y te da un montón de funcionalidades extra de rendimiento de forma gratuita.

StreetArt

React Query es la respuesta. Además, te permite crear "Higher-Order Components" (HOCs) o componentes wrapper que se encarguen de la lógica de loading/error. Por ejemplo, un componente que envuelva a tus componentes y muestre un spinner o un mensaje de error de forma centralizada, sin que cada componente tenga que saber de ello.

Baking

He estado mirando la documentación de TanStack Query y parece exactamente lo que necesito. La idea de tener el cacheo y los estados gestionados por la librería es un cambio de juego. ¡Gracias por la recomendación!