Intermediário FE

Otimizar Chamadas de API

Deduplicação, caching, stale-while-revalidate, cancelamento com AbortController e race conditions.

Definição

Chamadas de API eficientes evitam requests duplicados, cacheiam respostas, cancelam requests obsoletos, e agrupam múltiplos requests. React Query / SWR implementam todos esses patterns automaticamente. Sem essas libs, é fácil ter race conditions (o request mais lento responde por último), requests duplicados em múltiplos componentes, e estado stale.

Problema → Solução

Problema

Componente faz fetch, usuário navega, componente desmonta mas o fetch continua e tenta setar estado em componente desmontado. Ou o usuário digita rápido e dois requests competem — o mais lento "vence".

Solução

AbortController para cancelar fetch ao desmontar. Flag `active` para ignorar responses de requests obsoletos. React Query para deduplicação e cache automático. stale-while-revalidate: serve cache imediatamente e revalida em background.

Dica de entrevista

Tip

React Query resolve 90% desses problemas out of the box: deduplicação, cache, stale-while-revalidate, retry automático, cancelamento. Para projetos sem React Query, AbortController + flag de cleanup são o mínimo.

Código

// Cancelamento com AbortController
useEffect(() => {
  const controller = new AbortController()
  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setResults)
    .catch(err => {
      if (err.name === 'AbortError') return // ignorar cancelamentos
      setError(err)
    })
  return () => controller.abort()
}, [query])

// React Query — automático
const { data, isLoading } = useQuery({
  queryKey: ['search', query],
  queryFn: () => fetch(`/api/search?q=${query}`).then(r => r.json()),
  enabled: query.length > 2,
  staleTime: 30_000,    // 30s em cache
  gcTime: 5 * 60_000,   // 5min no garbage collector
})

Perguntas de entrevista

Q.O que é stale-while-revalidate?▾

A.Servir o dado em cache imediatamente (mesmo que antigo) e em background buscar versão atualizada. Resultado: UI responsiva sem loading spinner, dados frescos chegam silenciosamente. SWR (biblioteca) é nomeada após esse padrão.

Q.Como evitar race condition em busca?▾

A.Usar AbortController: no cleanup do useEffect, chamar controller.abort(). Requests cancelados lançam AbortError que deve ser ignorado no catch. Ou flag: let active = true no useEffect, false no cleanup — checar antes de setar estado.

Q.Quando usar React Query vs SWR vs fetch manual?▾

A.React Query: apps com estado de servidor complexo (mutations, otimismo, infinite queries). SWR: GET-heavy simples, bundle menor. Fetch manual: requests únicos sem necessidade de cache. Em 2025, React Query é o padrão.

53/122← →