React 18: Como Usar Suspense para Carregamento de Dados

Introdução

Com a evolução constante das aplicações web, a experiência do usuário se torna cada vez mais importante. Um dos desafios enfrentados pelos desenvolvedores é o gerenciamento eficiente do carregamento de dados. O React 18 trouxe uma série de melhorias, e uma das mais significativas é o uso do Suspense, que permite que componentes aguardem a resolução de dados antes de serem renderizados. Neste artigo, vamos explorar como aplicar o Suspense em suas aplicações React, tornando-as mais responsivas e agradáveis ao usuário.

Contexto ou Teoria

O Suspense foi introduzido inicialmente no React para lidar com a carga de componentes de maneira assíncrona. Com o React 18, essa funcionalidade foi aprimorada, permitindo que os desenvolvedores especifiquem estados de carregamento de forma mais intuitiva. O Suspense funciona em conjunto com a nova API de transições, facilitando o gerenciamento do estado da interface do usuário enquanto os dados estão sendo carregados.

O conceito central do Suspense é simples: você pode “suspender” a renderização de um componente até que os dados necessários estejam prontos. Isso melhora a experiência do usuário, pois evita que a interface fique em um estado inconsistente. Para utilizar o Suspense, você geralmente precisará de uma biblioteca de gerenciamento de estado que suporte a funcionalidade, como React Query ou SWR.

Demonstrações Práticas

Vamos criar um pequeno exemplo para demonstrar como usar o Suspense em uma aplicação React. Neste exemplo, utilizaremos a biblioteca React Query para buscar dados de uma API fictícia.

// Instale a biblioteca React Query
// npm install @tanstack/react-query

import React, { Suspense } from 'react';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// Criação do cliente React Query
const queryClient = new QueryClient();

// Componente que busca dados
const fetchUserData = async () => {
  const response = await fetch('https://api.example.com/user');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const UserData = () => {
  const { data, isLoading, error } = useQuery('userData', fetchUserData);

  if (isLoading) return 
Carregando...
;
  if (error) return 
Erro: {error.message}
;

  return (
    

      
Dados do Usuário
      
Nome: {data.name}
      
Email: {data.email}
    
  );
};

// Componente principal
const App = () => {
  return (
    
      Carregando informações do usuário...