<h2>Entendendo APIs e a Necessidade do Consumo em React</h2>
<p>Uma API (Application Programming Interface) é um contrato entre sistemas que permite a comunicação estruturada. Em aplicações React modernas, consumir APIs é essencial para recuperar dados de servidores, atualizar informações e manter sua aplicação sincronizada com o backend. Sem esse mecanismo, sua interface teria apenas dados estáticos.</p>
<p>A diferença fundamental entre as três abordagens que estudaremos está no nível de abstração: o Fetch é nativo do navegador e básico, o Axios oferece funcionalidades aprimoradas prontas para uso, e o React Query gerencia o estado da requisição de forma inteligente, cacheando dados e sincronizando automaticamente.</p>
<h2>Fetch API: O Padrão Nativo do Navegador</h2>
<p>O Fetch é a API padrão JavaScript para requisições HTTP. É nativa, não requer instalação e funciona bem em projetos simples.</p>
<h3>Sintaxe Básica e Exemplos</h3>
<pre><code class="language-javascript">import { useEffect, useState } from 'react';
function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) throw new Error('Erro na resposta');
return response.json();
})
.then(data => {
setUsers(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []);
if (loading) return <p>Carregando...</p>;
if (error) return <p>Erro: {error}</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default UsersList;</code></pre>
<h3>Limitações Práticas</h3>
<p>Embora funcional, Fetch exige muito código boilerplate para tratamento de estados. Para POST com headers customizados, a verbosidade aumenta. Além disso, não há retry automático, interceptadores ou cancelamento de requisições de forma elegante. Para projetos grandes, essas deficiências se tornam problemas.</p>
<h2>Axios: Simplicidade e Recursos Aprimorados</h2>
<p>Axios é uma biblioteca HTTP que abstrai Fetch com uma API mais limpa. Oferece interceptadores, transformação automática de dados e cancelamento de requisições nativamente.</p>
<h3>Instalação e Uso Direto</h3>
<pre><code class="language-bash">npm install axios</code></pre>
<pre><code class="language-javascript">import axios from 'axios';
import { useEffect, useState } from 'react';
function UsersList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const controller = new AbortController();
axios
.get('https://jsonplaceholder.typicode.com/users', {
signal: controller.signal,
})
.then(response => {
setUsers(response.data);
setLoading(false);
})
.catch(err => {
if (err.name !== 'CanceledError') {
setError(err.message);
}
setLoading(false);
});
return () => controller.abort();
}, []);
if (loading) return <p>Carregando...</p>;
if (error) return <p>Erro: {error}</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default UsersList;</code></pre>
<h3>Interceptadores para Autenticação</h3>
<pre><code class="language-javascript">const api = axios.create({
baseURL: 'https://api.exemplo.com',
});
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
});
api.interceptors.response.use(
response => response,
error => {
if (error.response?.status === 401) {
localStorage.removeItem('token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);</code></pre>
<p>Axios simplifica requisições e oferece recursos prontos, mas você ainda gerencia manualmente estado de loading, cache e sincronização.</p>
<h2>React Query: Gerenciamento Inteligente de Dados Remotos</h2>
<p>React Query (agora TanStack Query) é uma biblioteca que abstrai a complexidade de cache, sincronização e atualização de dados de API. Ela transforma consumo de dados remotos em uma operação declarativa.</p>
<h3>Instalação e Configuração</h3>
<pre><code class="language-bash">npm install @tanstack/react-query</code></pre>
<pre><code class="language-javascript">import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<YourComponents />
</QueryClientProvider>
);
}</code></pre>
<h3>Hook useQuery para Leitura</h3>
<pre><code class="language-javascript">import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
function UsersList() {
const { data: users, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: async () => {
const response = await axios.get(
'https://jsonplaceholder.typicode.com/users'
);
return response.data;
},
staleTime: 5 60 1000, // Cache válido por 5 minutos
});
if (isLoading) return <p>Carregando...</p>;
if (error) return <p>Erro: {error.message}</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default UsersList;</code></pre>
<h3>Hook useMutation para Criação/Atualização</h3>
<pre><code class="language-javascript">import { useMutation, useQueryClient } from '@tanstack/react-query';
function CreateUser() {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: async (newUser) => {
const response = await axios.post(
'https://jsonplaceholder.typicode.com/users',
newUser
);
return response.data;
},
onSuccess: () => {
// Invalida cache para refetch automático
queryClient.invalidateQueries({ queryKey: ['users'] });
},
});
const handleCreate = () => {
mutation.mutate({ name: 'João', email: 'joao@email.com' });
};
return (
<div>
<button onClick={handleCreate} disabled={mutation.isPending}>
{mutation.isPending ? 'Criando...' : 'Criar Usuário'}
</button>
{mutation.error && <p>Erro: {mutation.error.message}</p>}
</div>
);
}</code></pre>
<p>React Query elimina 80% do código boilerplate de gerenciamento de estado remoto, oferece sincronização automática, retry inteligente e cache sofisticado. Para aplicações profissionais, é o padrão ouro.</p>
<h2>Comparação Prática e Quando Usar</h2>
<div class="table-wrap"><table><thead><tr><th>Aspecto</th><th>Fetch</th><th>Axios</th><th>React Query</th></tr></thead><tbody><tr><td>Curva de Aprendizado</td><td>Baixa</td><td>Média</td><td>Média-Alta</td></tr><tr><td>Boilerplate</td><td>Alto</td><td>Médio</td><td>Baixo</td></tr><tr><td>Cache Automático</td><td>Não</td><td>Não</td><td>Sim</td></tr><tr><td>Retry Automático</td><td>Não</td><td>Sim</td><td>Sim</td></tr><tr><td>Melhor para</td><td>Projetos Simples</td><td>APIs Rápidas</td><td>Aplicações Complexas</td></tr></tbody></table></div>
<p>Use <strong>Fetch</strong> apenas em protótipos ou aplicações muito simples. Escolha <strong>Axios</strong> se você precisa de simplicidade sem adicionar dependências pesadas. Opte por <strong>React Query</strong> em projetos com múltiplas requisições, sincronização de dados em tempo real ou quando o cache inteligente agregue valor significativo.</p>
<h2>Conclusão</h2>
<p>Aprendemos que o <strong>Fetch é suficiente para casos triviais, mas gera código repetitivo</strong>. O <strong>Axios resolve a verbosidade com uma API intuitiva e interceptadores</strong>, sendo excelente para a maioria dos projetos. O <strong>React Query revoluciona o gerenciamento de dados remotos</strong>, automatizando cache, sincronização e atualização — esse é o futuro do desenvolvimento React profissional.</p>
<p>Seu próximo passo é escolher a ferramenta adequada ao escopo do projeto e dominar sua API completamente. Comece com Axios em um projeto real, depois migre para React Query quando sentir a necessidade de cache e sincronização inteligentes.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">MDN Web Docs - Fetch API</a></li>
<li><a href="https://axios-http.com/docs/intro" target="_blank" rel="noopener noreferrer">Documentação Oficial Axios</a></li>
<li><a href="https://tanstack.com/query/latest" target="_blank" rel="noopener noreferrer">TanStack Query - React Query</a></li>
<li><a href="https://react.dev/learn/synchronizing-with-effects" target="_blank" rel="noopener noreferrer">React Docs - Data Fetching</a></li>
<li><a href="https://blog.logrocket.com/react-hooks-fetching-data/" target="_blank" rel="noopener noreferrer">How to fetch data with React Hooks - LogRocket</a></li>
</ul>