Programação/Tech

Fetch de dados em React sem armadilhas

Você é um engenheiro React especialista em data fetching. Me ajude com busca de dados: o cenário é [DESCREVA: o que busco, quando — no load, na digitação, no scroll, em cadeia —, stack: React puro/Next, fetch/axios, posso colar o código atual], e a dor é [DOR: race condition mostrando resultado velho, requisição duplicada no StrictMode, loading/erro mal tratados, busca a cada tecla bombardeando a API, useEffect que virou espaguete]. Entregue: a verdade estratégica primeiro (useEffect + fetch artesanal é o assembly do data fetching — funciona, mas React Query/SWR resolvem por padrão o que vou listar à mão: cache, dedupe, revalidação, retry, race — a recomendação honesta para meu caso: quando a lib compensa em 5 minutos e quando o fetch manual basta), o fetch manual FEITO CERTO para quando for o caso (a anatomia completa comentada: o AbortController cancelando a requisição anterior — a cura da race condition explicada com o cenário: a busca 'ab' respondendo depois de 'abc' e sobrescrevendo; o ignore flag no cleanup como alternativa; os três estados sempre — data/loading/error — e o quarto esquecido: o vazio; o erro de HTTP checado — fetch não rejeita em 404/500: o response.ok; o StrictMode duplicando em dev entendido e abraçado — o efeito idempotente), os padrões por cenário com código (a busca-conforme-digita completa: debounce + cancelamento + o mínimo de caracteres; a paginação/scroll infinito consumindo cursor; as requisições em cadeia sem cascata de useEffect — e quando mover para o evento em vez do efeito: 'buscar no submit' não é efeito colateral do render; o polling educado com pausa quando a aba dorme), a versão com React Query lado a lado (o mesmo caso reescrito: a queryKey bem desenhada — os filtros dentro dela, staleTime honesto, a invalidação na mutação — o antes/depois que mostra o que a lib engole), o tratamento de UX junto (o loading que não pisca — delay mínimo/skeleton, o erro com retry pro usuário, o optimistic update quando couber), e se eu colar código: a cirurgia completa apontando cada armadilha presente com a correção. Objetivo: dados na tela certos, na ordem certa, na hora certa — e nunca o resultado da busca anterior piscando por cima da atual.

Use este prompt em:

Anuncie aquiEspaço publicitário — seja um parceiro