25 de agosto de 2025Português

Aprenda técnicas avançadas de busca paralela de dados no React com Suspense, otimizando performance e UX. Gerencie operações assíncronas e estados de carregamento de forma eficaz.

Coordenação do React Suspense: Dominando a Busca Paralela de Dados

O React Suspense revolucionou a forma como lidamos com operações assíncronas, particularmente a busca de dados. Ele permite que os componentes "suspendam" a renderização enquanto esperam os dados carregarem, proporcionando uma forma declarativa de gerenciar os estados de carregamento. No entanto, simplesmente envolver buscas de dados individuais com Suspense pode levar a um efeito cascata, onde uma busca é concluída antes que a próxima comece, impactando negativamente o desempenho. Este post detalha estratégias avançadas para coordenar múltiplas buscas de dados em paralelo usando Suspense, otimizando a responsividade da sua aplicação e aprimorando a experiência do usuário para um público global.

Compreendendo o Problema do Efeito Cascata na Busca de Dados

Imagine um cenário onde você precisa exibir um perfil de usuário com seu nome, avatar e atividade recente. Se você buscar cada parte dos dados sequencialmente, o usuário verá um spinner de carregamento para o nome, depois outro para o avatar e, finalmente, um para o feed de atividades. Este padrão de carregamento sequencial cria um efeito cascata, atrasando a renderização do perfil completo e frustrando os usuários. Para usuários internacionais com velocidades de rede variadas, esse atraso pode ser ainda mais pronunciado.

Considere este trecho de código simplificado:


function UserProfile() {
  const name = useName(); // Fetches user name
  const avatar = useAvatar(name); // Fetches avatar based on name
  const activity = useActivity(name); // Fetches activity based on name

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

Neste exemplo, useAvatar e useActivity dependem do resultado de useName. Isso cria um claro efeito cascata – useAvatar e useActivity não podem iniciar a busca de dados até que useName seja concluído. Isso é ineficiente e um gargalo de desempenho comum.

Estratégias para Busca Paralela de Dados com Suspense

A chave para otimizar a busca de dados com Suspense é iniciar todas as requisições de dados concorrentemente. Aqui estão várias estratégias que você pode empregar:

1. Pré-carregamento de Dados com `React.preload` e Recursos

Uma das técnicas mais poderosas é pré-carregar os dados antes mesmo de o componente ser renderizado. Isso envolve a criação de um "recurso" (um objeto que encapsula a promessa de busca de dados) e a pré-busca dos dados. O `React.preload` ajuda nisso. Quando o componente precisa dos dados, eles já estão disponíveis, eliminando o estado de carregamento quase que totalmente.

Considere um recurso para buscar um produto:


const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// Usage:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

Agora, você pode pré-carregar este recurso antes que o componente ProductDetails seja renderizado. Por exemplo, durante transições de rota ou ao passar o mouse.


React.preload(productResource);

Isso garante que os dados provavelmente estarão disponíveis quando o componente ProductDetails precisar deles, minimizando ou eliminando o estado de carregamento.

2. Usando `Promise.all` para Busca Concorrente de Dados

Outra abordagem simples e eficaz é usar Promise.all para iniciar todas as buscas de dados concorrentemente dentro de um único limite Suspense. Isso funciona bem quando as dependências de dados são conhecidas de antemão.

Vamos revisitar o exemplo do perfil do usuário. Em vez de buscar dados sequencialmente, podemos buscar o nome, o avatar e o feed de atividades concorrentemente:


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

async function fetchName() {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

No entanto, se cada um de Avatar e Activity também depender de fetchName, mas for renderizado dentro de limites Suspense separados, você pode elevar a promessa fetchName para o pai e fornecê-la via React Context.


import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Usando um Hook Personalizado para Gerenciar Buscas Paralelas

Para cenários mais complexos com dependências de dados potencialmente condicionais, você pode criar um hook personalizado para gerenciar a busca paralela de dados e retornar um recurso que o Suspense pode usar.


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

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('Resource not yet initialized');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// Example usage:
async function fetchUserData(userId) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>Loading user data...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Esta abordagem encapsula a complexidade de gerenciar as promessas e os estados de carregamento dentro do hook, tornando o código do componente mais limpo e focado na renderização dos dados.

4. Hidratação Seletiva com Renderização de Servidor por Streaming

Para aplicações renderizadas no servidor, o React 18 introduz a hidratação seletiva com renderização de servidor por streaming. Isso permite enviar HTML para o cliente em blocos conforme ele se torna disponível no servidor. Você pode envolver componentes de carregamento lento com limites <Suspense>, permitindo que o restante da página se torne interativo enquanto os componentes lentos ainda estão carregando no servidor. Isso melhora drasticamente o desempenho percebido, especialmente para usuários com conexões de rede lentas ou dispositivos.

Considere um cenário em que um site de notícias precisa exibir artigos de várias regiões do mundo (por exemplo, Ásia, Europa, Américas). Algumas fontes de dados podem ser mais lentas do que outras. A hidratação seletiva permite exibir primeiro os artigos de regiões mais rápidas, enquanto os de regiões mais lentas ainda estão carregando, evitando que a página inteira seja bloqueada.

Tratamento de Erros e Estados de Carregamento

Embora o Suspense simplifique o gerenciamento do estado de carregamento, o tratamento de erros permanece crucial. Limites de erro (usando o método de ciclo de vida componentDidCatch ou o hook useErrorBoundary de bibliotecas como `react-error-boundary`) permitem que você lide graciosamente com erros que ocorrem durante a busca ou renderização de dados. Esses limites de erro devem ser colocados estrategicamente para capturar erros dentro de limites Suspense específicos, evitando que a aplicação inteira trave.


import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... fetches data that might error
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Lembre-se de fornecer uma interface de usuário de fallback informativa e amigável para estados de carregamento e erro. Isso é especialmente importante para usuários internacionais que podem estar encontrando velocidades de rede mais lentas ou interrupções de serviço regionais.

Melhores Práticas para Otimizar a Busca de Dados com Suspense

Identifique e Priorize Dados Críticos: Determine quais dados são essenciais para a renderização inicial da sua aplicação e priorize a busca desses dados primeiro.
Pré-carregue Dados Quando Possível: Use `React.preload` e recursos para pré-carregar dados antes que os componentes precisem deles, minimizando os estados de carregamento.
Busque Dados Concorrentemente: Utilize `Promise.all` ou hooks personalizados para iniciar múltiplas buscas de dados em paralelo.
Otimize Endpoints de API: Garanta que seus endpoints de API sejam otimizados para desempenho, minimizando a latência e o tamanho do payload. Considere usar técnicas como GraphQL para buscar apenas os dados de que você precisa.
Implemente Cache: Armazene em cache dados acessados frequentemente para reduzir o número de requisições de API. Considere usar bibliotecas como `swr` ou `react-query` para capacidades robustas de cache.
Use Code Splitting: Divida sua aplicação em pedaços menores para reduzir o tempo de carregamento inicial. Combine code splitting com Suspense para carregar e renderizar progressivamente diferentes partes da sua aplicação.
Monitore o Desempenho: Monitore regularmente o desempenho da sua aplicação usando ferramentas como Lighthouse ou WebPageTest para identificar e resolver gargalos de desempenho.
Lide com Erros Graciosamente: Implemente limites de erro para capturar erros durante a busca e renderização de dados, fornecendo mensagens de erro informativas aos usuários.
Considere a Renderização no Lado do Servidor (SSR): Por motivos de SEO e desempenho, considere usar SSR com streaming e hidratação seletiva para oferecer uma experiência inicial mais rápida.

Conclusão

O React Suspense, quando combinado com estratégias para busca paralela de dados, oferece um poderoso conjunto de ferramentas para a construção de aplicações web responsivas e de alto desempenho. Ao compreender o problema do efeito cascata e implementar técnicas como pré-carregamento, busca concorrente com Promise.all e hooks personalizados, você pode melhorar significativamente a experiência do usuário. Lembre-se de tratar os erros graciosamente e monitorar o desempenho para garantir que sua aplicação permaneça otimizada para usuários em todo o mundo. À medida que o React continua a evoluir, explorar novos recursos como a hidratação seletiva com renderização de servidor por streaming aprimorará ainda mais sua capacidade de oferecer experiências de usuário excepcionais, independentemente da localização ou das condições da rede. Ao adotar essas técnicas, você pode criar aplicações que não são apenas funcionais, mas também um prazer de usar para seu público global.

Este post teve como objetivo fornecer uma visão geral abrangente das estratégias de busca paralela de dados com React Suspense. Esperamos que você o tenha achado informativo e útil. Encorajamos você a experimentar essas técnicas em seus próprios projetos e compartilhar suas descobertas com a comunidade.