En cualquier aplicación web, gestionar los estados de carga y error es crucial. Mostrar los estados de carga mantiene informado al usuario, pero históricamente, esta gestión puede resultar tediosa de implementar manualmente.

React Query simplifica enormemente el manejo de los estados de carga y los estados globales. De hecho, React Query evita solicitudes redundantes, optimizando así el rendimiento de la aplicación.

Tomemos un ejemplo de código que implementa un estado de carga en nuestra aplicación.

Defina un enlace para obtener una lista de usuarios:

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

Aquí, buscamos cuatro usuarios con useQuery. Agregamos un retraso de 2 segundos para ilustrar el estado de carga. Luego devolvemos los datos y un valor booleano para el estado de carga.

En el lado del componente, creemos un componente llamado Ejemplo:

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

En este componente, utilizamos nuestro enlace para recuperar la lista de usuarios. Antes de renderizar la vista, realizamos un "retorno anticipado" con un mensaje de carga, luego mostramos el título, el botón y los usuarios.

Limitaciones y alternativas

Sin embargo, cada llamada de red requiere una gestión explícita del estado de carga. Si el código no está factorizado, es posible que algunos elementos de la vista estén esperando a ser mostrados, como el título y la acción.

Aquí tienes una alternativa para evitar bloquear la vista:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

Aquí utilizamos renderizado condicional en lugar de un "retorno anticipado". Esta solución es menos legible y más difícil de mantener en componentes complejos.

La solución ideal: un componente de carga genérico

La solución más ingeniosa es crear un componente que represente nuestro mensaje de carga o nuestro componente principal en función de una variable.

type Props = PropsWithChildren;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return 
Loading...
;
  }

  return {children}>;
};

Uso en nuestro componente

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      ...
      
  );
};

Esta factorización centraliza la lógica de representación condicional y unifica el uso de mensajes de carga, ofreciendo un código más limpio y fácil de mantener.

Descubre la magia del suspenso

Pero ahora, si les digo que este componente que acabamos de crear ya está integrado en React. Aún mejor, ¡es mágico! ¡No más gestión manual de estados de carga!

¿Cómo?

Con React's Suspense (versión de React >= 16.6), todo se vuelve más simple y limpio. Suspense te permite declarar explícitamente a React que un componente está esperando datos asincrónicos, y React se encarga de administrar todo por nosotros.

Implementando useSuspenseQuery

Usemos useSuspenseQuery para administrar automáticamente el estado de carga. He aquí cómo hacerlo:

Enganche para recuperar usuarios

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

Uso en el componente con suspenso

Ahora, actualicemos nuestro componente de ejemplo para usar Suspense:

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
  );
};

Ventajas del suspenso

Con Suspense, centralizamos la gestión del estado de carga en un solo lugar, haciendo que el código sea más legible y mantenible. El respaldo de Suspense se muestra automáticamente siempre que los datos no estén disponibles, lo que elimina la necesidad de administrar manualmente los estados de carga.

Además, Suspense anima a los equipos de desarrollo a factorizar su código. Al utilizar componentes de carga estandarizados y controladores de estado asincrónicos, los desarrolladores pueden crear módulos reutilizables y consistentes, mejorando así la calidad del código y la capacidad de mantenimiento a largo plazo.

Conclusión

Usar Suspense y useSuspenseQuery revoluciona la gestión de estados de carga en aplicaciones React. Este enfoque no sólo simplifica el código sino que también mejora la experiencia del usuario al garantizar una representación fluida y consistente. La transición de useQuery a useSuspenseQuery es una evolución natural para lograr aplicaciones más limpias y eficientes.

Además, la integración de Suspense anima a los equipos de desarrollo a factorizar su código. En conclusión, adoptar Suspense y useSuspenseQuery no es solo una mejora técnica, sino también un paso hacia prácticas de desarrollo más saludables y efectivas.

Mi boletín :D