Aula 7

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.

            
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.

Instale e veja como funciona em: Documentação do Axios

React Query é uma biblioteca para gerenciamento de estados relacionados a dados assíncronos em aplicações React. Ela simplifica tarefas como o fetch de dados, caching, sincronização e atualização em tempo real, reduzindo a necessidade de gerenciar manualmente estados de carregamento, erro e sucesso. Com React Query, dados são armazenados em cache e revalidados automaticamente, melhorando a performance da aplicação. A biblioteca também oferece suporte a funcionalidades avançadas, como pré-busca de dados, paginação e invalidação de cache, tornando-se uma escolha poderosa para lidar com APIs e dados assíncronos de forma eficiente.

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.

Instale e veja como funciona em: Documentação do TanStack Query

SWR (stale-while-revalidate) é uma biblioteca para React que facilita o gerenciamento de dados remotos, especialmente na interação com APIs. Baseada no conceito de "stale-while-revalidate", ela retorna dados armazenados em cache enquanto busca novas informações em segundo plano, garantindo uma experiência rápida e responsiva para o usuário.

SWR simplifica a implementação de funcionalidades como cache, revalidação automática, sincronização de dados, e suporte a SSR (Server-Side Rendering). É ideal para aplicações que requerem dados em tempo real ou atualizações frequentes, oferecendo uma abordagem leve e eficiente para o gerenciamento de dados assíncronos.

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.

Instale e veja como funciona em: Documentação do SWR