React 19: Utilizando o Novo Hook
Paulo Clemente
Navegação Rápida:
Vamos explorar o novo Hook do React, aplicando-o para fazer uma requisição à API do GitHub e exibir os dados do usuário na página. Vamos passar por cada etapa do processo, incluindo a configuração e a implementação do componente, até lidarmos com possíveis erros como o rate limiting da API do GitHub.
Passo 1: Função para Buscar o Perfil do GitHub
Primeiro, vamos criar uma função assíncrona que irá buscar os dados do perfil do GitHub:
async function getGithubProfile() { const response = await fetch('https://api.github.com/users/pauloclemente'); const data = await response.json(); return data; }
Essa função faz uma requisição para a API do GitHub usando
fetch, aguarda a resposta, converte para JSON e retorna os dados.Passo 2: Componente que Utiliza o Hook use
Agora, vamos criar um componente que utiliza o Hook
use para buscar os dados do usuário:import React from 'react'; function User() { const user = use(getGithubProfile()); return ( <pre>{JSON.stringify(user, null, 2)}</pre> ); } export default User;
Aqui, utilizamos o
use dentro do nosso componente User. Esse Hook chama a função getGithubProfile e armazena os dados retornados na constante user. Em seguida, exibimos esses dados em um elemento <pre> formatado com JSON.stringify.Passo 3: Componente Principal Utilizando Suspense
Para lidar com o tempo de carregamento dos dados, precisamos envolver nosso componente
User com o componente Suspense do React e definir um fallback:import React, { Suspense } from 'react'; import User from './User'; function App() { return ( <Suspense fallback={<div>Carregando...</div>}> <User /> </Suspense> ); } export default App;
Aqui, o componente
Suspense envolve o User e exibe "Carregando..." enquanto os dados não estão disponíveis.Considerações Importantes
Server-Side Rendering (SSR): Ao usar o
use do React, a requisição pode ser realizada no lado do servidor por padrão, especialmente se você estiver usando Next.js. Se você desabilitar o JavaScript, a página ainda pode funcionar corretamente devido à renderização no servidor.Suspense: É essencial envolver o componente que usa o Hook
use com Suspense e definir um fallback para lidar com o tempo de carregamento.Rate Limiting: Certifique-se de não exceder o limite de requisições da API do GitHub durante os testes para evitar erros.
Exemplo Final com Suspense e Tratamento de Erros
Para garantir que tudo funcione corretamente, aqui está o exemplo final do nosso componente principal com
Suspense e um componente User:import React, { Suspense } from 'react'; async function getGithubProfile() { const response = await fetch('https://api.github.com/users/pauloclemente'); const data = await response.json(); return data; } function User() { const user = use(getGithubProfile()); return ( <pre>{JSON.stringify(user, null, 2)}</pre> ); } function App() { return ( <Suspense fallback={<div>Carregando...</div>}> <User /> </Suspense> ); } export default App;
Utilizar o novo Hook do React para buscar dados de uma API é uma maneira eficiente de lidar com requisições assíncronas. Envolver o componente com
Suspense é fundamental para gerenciar o estado de carregamento e garantir uma experiência de usuário fluida. Lembre-se de monitorar o rate limiting da API do GitHub durante os testes para evitar interrupções no funcionamento do seu aplicativo.
