React cache: deduplicação automática sem frameworks

Deduplicação de Dados: O Poder Escondido do React

O React já oferece, desde a versão 18, uma API nativa de cache capaz de evitar chamadas de fetch repetidas quando múltiplos componentes precisam da mesma informação. Isso significa menos tráfego de dados, menos processamento desnecessário e uma experiência do usuário mais rápida – tudo sem depender de Next, SWR ou libs de terceiros.

Como funciona o cache nativo do React?

Quando você importa cache direto de react e envolve sua função de fetch, o React faz deduplicação das chamadas. Ou seja: se dois ou mais componentes renderizam ao mesmo tempo e usam a mesma função cacheada, a requisição ocorre só uma vez. Os dados são compartilhados automaticamente.

O problema: Requisições duplicadas em componentes

Imagine dois componentes filhos que precisam da mesma informação da API, sendo renderizados juntos. Você pode: 1) Fetch no componente pai e passar por props, ou 2) Fazer fetch em cada filho individual. Sem cache, a segunda opção dispara duas requisições idênticas desnecessárias.

O que muda com a API de cache?

Ao envolver sua função fetch com o cache() do React, qualquer chamada repetida dentro do mesmo ciclo é automaticamente tratada. Resultados são replicados para todos os componentes que pedem a mesma informação.

Como usar a API de cache na prática

Importe e use cache do React

Basta importar cache de react e envolver qualquer função assíncrona que executa fetch ou busca de dados:

import { cache } from "react";
const getDados = cache(async () => {
  const resp = await fetch("/api/dados");
  return resp.json();
});

Compatibilidade: Funciona em Apps sem Framework

Você não precisa de Next.js, Remix, Astro, nem biblioteca externa para aproveitar esse recurso. O cache do React é nativo e funciona até em aplicações criadas do zero, puro create-react-app ou Vite.

Quando NÃO usar a API de cache

Se você precisa de cache persistente no navegador, gerenciamento de validade (TTL), ou múltiplas chaves dinâmicas, frameworks específicos ou soluções como SWR e React Query podem ser mais adequadas na camada de dados.

Padrão de uso avançado: Compartilhe dados entre componentes

Use cache() sempre que múltiplos componentes podem pedir o mesmo dado em renderizações “paralelas”. Menos props, menos contextos, código mais direto.

Performance: O que você ganha na prática

Economia de requisições (menos custos), resposta instantânea para múltiplos componentes, menos bugs gerados por estados colaterais. O resultado? Apps escaláveis sem gambiarras.

Boas práticas: Documentação, legibilidade e testes

Documente cada função cacheada e deixe claro para o time quando e por que usar. Escreva testes para garantir que deduplicação ocorre como esperado sob concorrência de componentes.

Lembre-se: Cache do React não é magia

Ele apenas resolve deduplicidade de chamadas síncronas, compartilhando o resultado no ciclo de renderização. Para cache global, use libs externas.

Alternativas: Quando usar SWR, React Query ou contextos

Se o projeto exige cache global, atualizações em tempo real, invalidar por chave, revalidação ou sincronização offline, soluções tradicionais adicionam controles extras que o cache nativo não cobre.

Resumo: O que você precisa lembrar

1. React possui cache nativo que resolve deduplicação de fetches em múltiplos componentes.
2. Funciona sem frameworks externos, basta importar de 'react'.
3. Não substitui cache persistente, mas resolve 90% dos problemas de requisições duplicadas em apps modernos.

Comece agora: elimine duplicações, acelere seu React

Importe cache, envolva seus fetches e ganhe produtividade sem mágica ou dependências extras. Para dominar React moderno, avance para o próximo nível.