Em qualquer aplicativo da web, gerenciar o carregamento e os estados de erro é crucial. A exibição dos estados de carregamento mantém o usuário informado, mas, historicamente, esse gerenciamento pode ser entediante de implementar manualmente.

React Query simplifica muito o tratamento de estados de carregamento e estados globais. Na verdade, o React Query evita solicitações redundantes, otimizando assim o desempenho da aplicação.

Vamos dar um exemplo de código que implementa um estado de carregamento em nosso aplicativo.

Defina um gancho para buscar uma lista de usuários:

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,
  };
};

Aqui, buscamos quatro usuários com useQuery. Adicionamos um atraso de 2 segundos para ilustrar o estado de carregamento. Em seguida, retornamos os dados e um booleano para o estado de carregamento.

No lado do componente, vamos criar um componente chamado Exemplo:

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

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

  return (
    

      

        
Users
        

          Add users
        
      
      
    
  );
};

Neste componente, usamos nosso gancho para buscar a lista de usuários. Antes de renderizar a visualização, realizamos um "retorno antecipado" com uma mensagem de carregamento e, em seguida, exibimos o título, o botão e os usuários.

Limitações e Alternativas

No entanto, cada chamada de rede requer gerenciamento explícito do estado de carregamento. Se o código não for fatorado, alguns elementos da visualização poderão estar aguardando para serem exibidos, como o título e a ação.

Aqui está uma alternativa para evitar o bloqueio da visualização:

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...
 : }
    
  );
};

Aqui, usamos renderização condicional em vez de um "retorno antecipado". Esta solução é menos legível e mais difícil de manter em componentes complexos.

A solução ideal: um componente de carregamento genérico

A solução mais engenhosa é criar um componente que renderize nossa mensagem de carregamento ou nosso componente principal com base em uma variável.

type Props = PropsWithChildren;

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

  return {children}>;
};

Uso em nosso componente

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

  return (
    

      ...
      
        
      
    
  );
};

Essa fatoração centraliza a lógica de renderização condicional e unifica o uso de mensagens de carregamento, oferecendo um código mais limpo e de fácil manutenção.

Descubra a magia do suspense

Mas agora, se eu disser que este componente que acabamos de criar já está embutido no React. Melhor ainda, é mágico! Chega de gerenciamento manual de estados isLoading!

Como?

Com o Suspense do React (versão React >= 16.6), tudo fica mais simples e limpo. O Suspense permite que você declare explicitamente ao React que um componente está aguardando dados assíncronos, e o React se encarrega de gerenciar tudo para nós.

Implementando useSuspenseQuery

Vamos usar useSuspenseQuery para gerenciar automaticamente o estado de carregamento. Veja como fazer isso:

Gancho para buscar usuários

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

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

Uso no Componente com Suspense

Agora, vamos atualizar nosso componente Exemplo para usar Suspense:

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

  return ;
};

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

      

        
Users
        

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

Vantagens do Suspense

Com o Suspense, centralizamos o gerenciamento do estado de carregamento em um só lugar, tornando o código mais legível e fácil de manter. O substituto do Suspense é exibido automaticamente enquanto os dados não estiverem disponíveis, eliminando a necessidade de gerenciar manualmente os estados isLoading.

Além disso, o Suspense incentiva as equipes de desenvolvimento a fatorar seu código. Ao usar componentes de carregamento padronizados e manipuladores de estado assíncronos, os desenvolvedores podem criar módulos reutilizáveis ​​e consistentes, melhorando assim a qualidade do código e a capacidade de manutenção a longo prazo.

Conclusão

Usar Suspense e useSuspenseQuery revoluciona o gerenciamento de estados de carregamento em aplicativos React. Essa abordagem não apenas simplifica o código, mas também aprimora a experiência do usuário, garantindo uma renderização suave e consistente. A transição de useQuery para useSuspenseQuery é uma evolução natural para aplicativos mais limpos e eficientes.

Além disso, a integração do Suspense incentiva as equipes de desenvolvimento a fatorar seu código. Concluindo, adotar o Suspense e usarSuspenseQuery não é apenas uma melhoria técnica, mas também um passo em direção a práticas de desenvolvimento mais saudáveis ​​e eficazes.

Meu boletim informativo:D