Aula 7

Requisições HTTP no React

Existem várias formas de realizar requisições HTTP no React. Abaixo, exploramos algumas opções, incluindo vantagens e desvantagens de cada abordagem.

1. Usando fetch nativo do JavaScript

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

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Data:</h1>
      <pre>{data ? JSON.stringify(data, null, 2) : 'Loading...'}</pre>
    </div>
  );
}

export default App;

        

Vantagens

• Nativo no JavaScript; nenhuma biblioteca externa necessária.
• Compatível com qualquer ambiente moderno.
• Ideal para chamadas simples.

Desvantagens

• Não inclui timeout por padrão.
• Tratamento de erros mais trabalhoso.
• Pode ser verboso para lógicas repetitivas.

2. Usando axios

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

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then((response) => setData(response.data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Data:</h1>
      <pre>{data ? JSON.stringify(data, null, 2) : 'Loading...'}</pre>
    </div>
  );
}

export default App;

        

Vantagens

• Sintaxe mais concisa que fetch.
• Suporte nativo a JSON, timeout e cancelamento de requisições.
• Interceptadores para manipulação global de requisições e respostas.

Desvantagens

• Adiciona uma dependência externa.
• Leve aumento no tamanho do bundle.

3. Usando react-query (TanStack Query)

import React from 'react';
import { useQuery } from '@tanstack/react-query';

const App = () => {
  const { data, isLoading, error } = useQuery(['data'], () =>
    fetch('https://api.example.com/data').then((res) => res.json())
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

        

Vantagens

• Cache de dados automático e revalidação em segundo plano.
• Gerenciamento eficiente de estado de requisições.
• Ótimo suporte a SSR (Server-Side Rendering) (Veremos esse tema em aulas futuras).

Desvantagens

• Curva de aprendizado mais longa para iniciantes.
• Adiciona uma dependência externa.

4. Usando useEffect com Context API ou Redux

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

const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return {children};
}

export function useData() {
  return useContext(DataContext);
}

const App = () => {
  const data = useData();

  return (
    <div>
      <h1>Data:</h1>
      <pre>{data ? JSON.stringify(data, null, 2) : 'Loading...'}</pre>
    </div>
  );
}

export default App;

        

Vantagens

• Integrado ao estado global da aplicação.
• Sem dependências externas ao usar Context API.

Desvantagens

• Não fornece caching ou revalidação automática.
• Pode aumentar a complexidade em estados globais maiores.

5. Usando SWR

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const App = () => {
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

        

Vantagens

• Cache integrado e revalidação automática.
• API simples e declarativa.
• Suporte a SSR e ISR. (Veremos esse tema em aulas futuras).

Desvantagens

• Adiciona uma dependência externa.
• Funcionalidades avançadas (ex.:interceptadores) exigem configuração adicional.