React Suspense: Um Guia Completo para Busca de Dados e Divisão de Código

React Suspense é um recurso poderoso introduzido no React 16.6 que permite "suspender" a renderização de componentes enquanto se espera por algo, como o carregamento de dados ou o download de código. Isso fornece uma maneira declarativa de gerenciar estados de carregamento e melhorar a experiência do usuário, lidando graciosamente com operações assíncronas. Este guia o levará pelos conceitos do Suspense, seus casos de uso e exemplos práticos de como implementá-lo em suas aplicações React.

O que é o React Suspense?

Suspense é um componente React que envolve outros componentes e permite exibir uma UI de fallback (por exemplo, um spinner de carregamento) enquanto esses componentes esperam que uma promise seja resolvida. Essa promise pode estar relacionada a:

• Busca de dados: Esperando que os dados sejam recuperados de uma API.
• Divisão de código: Esperando que os módulos JavaScript sejam baixados e analisados.

Antes do Suspense, o gerenciamento de estados de carregamento geralmente envolvia renderização condicional complexa e manipulação manual de operações assíncronas. O Suspense simplifica isso fornecendo uma abordagem declarativa, tornando seu código mais limpo e fácil de manter.

Conceitos Chave

• Componente Suspense: O próprio componente <Suspense>. Ele aceita uma prop fallback, que especifica a UI a ser exibida enquanto os componentes envolvidos estão em suspensão.
• React.lazy(): Uma função que permite a divisão de código importando componentes dinamicamente. Retorna uma Promise que é resolvida quando o componente é carregado.
• Integração de Promises: O Suspense se integra perfeitamente com Promises. Quando um componente tenta renderizar dados de uma Promise que ainda não foi resolvida, ele "suspende" e exibe a UI de fallback.

Casos de Uso

1. Busca de Dados com Suspense

Um dos principais casos de uso para o Suspense é o gerenciamento da busca de dados. Em vez de gerenciar manualmente os estados de carregamento com renderização condicional, você pode usar o Suspense para exibir declarativamente um indicador de carregamento enquanto aguarda a chegada dos dados.

Exemplo: Busca de dados de usuário de uma API

Digamos que você tenha um componente que exibe dados de usuário buscados de uma API. Sem o Suspense, você poderia ter um código como este:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Carregando dados do usuário...</p>;
  }

  if (error) {
    return <p>Erro: {error.message}</p>;
  }

  if (!user) {
    return <p>Nenhum dado de usuário disponível.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Este código funciona, mas envolve o gerenciamento de múltiplas variáveis de estado (isLoading, error, user) e lógica de renderização condicional. Com o Suspense, você pode simplificar isso usando uma biblioteca de busca de dados como SWR ou TanStack Query (anteriormente React Query) que são projetadas para funcionar perfeitamente com o Suspense.

Veja como você pode usar o SWR com o Suspense:

import React from 'react';
import useSWR from 'swr';

// Uma função fetcher simples
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Erro: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Carregando dados do usuário...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

Neste exemplo:

• Usamos useSWR para buscar os dados do usuário. A opção suspense: true informa ao SWR para lançar uma Promise se os dados ainda não estiverem disponíveis.
• O componente UserProfile não precisa gerenciar estados de carregamento ou erro explicitamente. Ele simplesmente renderiza os dados do usuário quando disponíveis.
• O componente <Suspense> captura a Promise lançada pelo SWR e exibe a UI de fallback (<p>Carregando dados do usuário...</p>) enquanto os dados estão sendo buscados.

Essa abordagem simplifica a lógica do seu componente e facilita o raciocínio sobre a busca de dados.

Considerações Globais para a Busca de Dados:

Ao construir aplicações para um público global, considere o seguinte:

• Latência da Rede: Usuários em diferentes localizações geográficas podem experimentar latência de rede variada. O Suspense pode ajudar a proporcionar uma melhor experiência do usuário exibindo indicadores de carregamento enquanto os dados são buscados de servidores distantes. Considere usar uma Rede de Entrega de Conteúdo (CDN) para armazenar em cache seus dados mais próximos dos seus usuários.
• Localização de Dados: Certifique-se de que sua API suporte a localização de dados, permitindo que você sirva dados no idioma e formato preferidos do usuário.
• Disponibilidade da API: Monitore a disponibilidade e o desempenho de suas APIs em diferentes regiões para garantir uma experiência de usuário consistente.

2. Divisão de Código com React.lazy() e Suspense

Divisão de código é uma técnica para quebrar sua aplicação em partes menores, que podem ser carregadas sob demanda. Isso pode melhorar significativamente o tempo de carregamento inicial da sua aplicação, especialmente para projetos grandes e complexos.

React fornece a função React.lazy() para a divisão de código de componentes. Quando usada com o Suspense, ela permite exibir uma UI de fallback enquanto se espera que o componente seja baixado e analisado.

Exemplo: Carregamento preguiçoso de um componente

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Carregando...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

Neste exemplo:

• Usamos React.lazy() para importar dinamicamente o OtherComponent. Isso retorna uma Promise que é resolvida quando o componente é carregado.
• Envolvemos o <OtherComponent /> com <Suspense> e fornecemos uma prop fallback.
• Enquanto o OtherComponent está sendo carregado, a UI de fallback (<p>Carregando...</p>) será exibida. Uma vez que o componente é carregado, ele substituirá a UI de fallback.

Benefícios da Divisão de Código:

• Tempo de Carregamento Inicial Melhorado: Ao carregar apenas o código necessário para a visualização inicial, você pode reduzir o tempo que sua aplicação leva para se tornar interativa.
• Tamanho do Bundle Reduzido: A divisão de código pode ajudar a reduzir o tamanho total do bundle JavaScript da sua aplicação, o que pode melhorar o desempenho, especialmente em conexões de baixa largura de banda.
• Melhor Experiência do Usuário: Ao proporcionar um carregamento inicial mais rápido e carregar o código apenas quando necessário, você pode criar uma experiência de usuário mais suave e responsiva.

Técnicas Avançadas de Divisão de Código:

• Divisão de Código Baseada em Rotas: Divida sua aplicação com base em rotas, de modo que cada rota carregue apenas o código que precisa. Isso pode ser facilmente alcançado com bibliotecas como React Router.
• Divisão de Código Baseada em Componentes: Divida componentes individuais em blocos separados, especialmente para componentes grandes ou pouco usados.
• Importações Dinâmicas: Use importações dinâmicas dentro de seus componentes para carregar código sob demanda com base em interações do usuário ou outras condições.

3. Modo Concorrente e Suspense

Suspense é um ingrediente chave para o Modo Concorrente do React, um conjunto de novos recursos que permitem ao React trabalhar em múltiplas tarefas concorrentemente. O Modo Concorrente permite que o React priorize atualizações importantes, interrompa tarefas de longa duração e melhore a capacidade de resposta da sua aplicação.

Com o Modo Concorrente e o Suspense, o React pode:

• Começar a renderizar componentes antes que todos os dados estejam disponíveis: O React pode começar a renderizar um componente mesmo que algumas de suas dependências de dados ainda estejam sendo buscadas. Isso permite que o React mostre uma UI parcial mais cedo, melhorando o desempenho percebido da sua aplicação.
• Interromper e retomar a renderização: Se uma atualização de maior prioridade surgir enquanto o React está renderizando um componente, ele pode interromper o processo de renderização, lidar com a atualização de maior prioridade e, em seguida, retomar a renderização do componente mais tarde.
• Evitar o bloqueio do thread principal: O Modo Concorrente permite que o React execute tarefas de longa duração sem bloquear o thread principal, o que pode evitar que a UI se torne irresponsiva.

Para habilitar o Modo Concorrente, você pode usar a API createRoot no React 18:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Cria uma raiz.
root.render(<App />);

Melhores Práticas para Usar o Suspense

• Use uma Biblioteca de Busca de Dados: Considere usar uma biblioteca de busca de dados como SWR ou TanStack Query, que são projetadas para funcionar perfeitamente com o Suspense. Essas bibliotecas fornecem recursos como cache, retentativas automáticas e tratamento de erros, o que pode simplificar sua lógica de busca de dados.
• Forneça uma UI de Fallback Significativa: A UI de fallback deve fornecer uma indicação clara de que algo está carregando. Use spinners, barras de progresso ou skeleton loaders para criar uma experiência de carregamento visualmente atraente e informativa.
• Trate Erros Graciosamente: Use Error Boundaries para capturar erros que ocorrem durante a renderização. Isso pode evitar que toda a sua aplicação trave e proporcionar uma melhor experiência do usuário.
• Otimize a Divisão de Código: Use a divisão de código estrategicamente para reduzir o tempo de carregamento inicial da sua aplicação. Identifique componentes grandes ou pouco usados e divida-os em partes separadas.
• Teste sua Implementação de Suspense: Teste minuciosamente sua implementação de Suspense para garantir que ela esteja funcionando corretamente e que sua aplicação esteja lidando com estados de carregamento e erros de forma graciosa.

Tratamento de Erros com Error Boundaries

Enquanto o Suspense lida com o estado de *carregamento*, os Error Boundaries lidam com o estado de *erro* durante a renderização. Error Boundaries são componentes React que capturam erros JavaScript em qualquer lugar na sua árvore de componentes filhos, registram esses erros e exibem uma UI de fallback em vez de travar toda a árvore de componentes.

Aqui está um exemplo básico de um Error Boundary:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atualiza o estado para que a próxima renderização mostre a UI de fallback.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Você também pode registrar o erro em um serviço de relatórios de erro
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Você pode renderizar qualquer UI de fallback personalizada
      return <h1>Algo deu errado.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Para usar o Error Boundary, envolva-o em torno do componente que pode lançar um erro:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Ao combinar Suspense e Error Boundaries, você pode criar uma aplicação robusta e resiliente que lida com estados de carregamento e erros de forma graciosa.

Exemplos do Mundo Real

Aqui estão alguns exemplos do mundo real de como o Suspense pode ser usado para melhorar a experiência do usuário:

• Website de E-commerce: Use o Suspense para exibir indicadores de carregamento enquanto busca detalhes ou imagens de produtos. Isso pode evitar que o usuário veja uma página em branco enquanto espera que os dados sejam carregados.
• Plataforma de Mídias Sociais: Use o Suspense para carregar preguiçosamente comentários ou posts conforme o usuário rola a página. Isso pode melhorar o tempo de carregamento inicial da página e reduzir a quantidade de dados que precisam ser baixados.
• Aplicação de Dashboard: Use o Suspense para exibir indicadores de carregamento enquanto busca dados para gráficos. Isso pode proporcionar uma experiência de usuário mais suave e responsiva.

Exemplo: Plataforma de E-commerce Internacional

Considere uma plataforma de e-commerce internacional que vende produtos globalmente. A plataforma pode alavancar o Suspense e o React.lazy() para:

• Carregamento Preguiçoso de Imagens de Produtos: Use React.lazy() para carregar imagens de produtos apenas quando elas estiverem visíveis na viewport. Isso pode reduzir significativamente o tempo de carregamento inicial da página de listagem de produtos. Envolva cada imagem de carregamento preguiçoso com <Suspense fallback={<img src="placeholder.png" alt="Carregando..." />}> para exibir uma imagem de espaço reservado enquanto a imagem real está carregando.
• Divisão de Código de Componentes Específicos por País: Se a plataforma tiver componentes específicos por país (por exemplo, formatação de moeda, campos de entrada de endereço), use React.lazy() para carregar esses componentes apenas quando o usuário selecionar um país específico.
• Busca de Descrições de Produtos Localizadas: Use uma biblioteca de busca de dados como SWR com Suspense para buscar descrições de produtos no idioma preferido do usuário. Exiba um indicador de carregamento enquanto as descrições localizadas estão sendo buscadas.

Conclusão

React Suspense é um recurso poderoso que pode melhorar significativamente a experiência do usuário de suas aplicações React. Ao fornecer uma maneira declarativa de gerenciar estados de carregamento e divisão de código, o Suspense simplifica seu código e facilita o raciocínio sobre operações assíncronas. Seja você construindo um pequeno projeto pessoal ou uma grande aplicação empresarial, o Suspense pode ajudá-lo a criar uma experiência de usuário mais suave, mais responsiva e com melhor desempenho.

Ao integrar o Suspense com bibliotecas de busca de dados e técnicas de divisão de código, você pode liberar todo o potencial do Modo Concorrente do React e criar aplicações web verdadeiramente modernas e envolventes. Abrace o Suspense e eleve seu desenvolvimento React para o próximo nível.

Para Saber Mais

• Documentação do React Suspense
• Documentação do SWR
• Documentação do TanStack Query
• Anúncio do React 18 (Modo Concorrente)