Por que usar uma biblioteca server-state como React Query?

Question

IT Interview Practice · Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) especializam-se no gerenciamento de **dados obtidos de um servidor** — tratando-os como um cache para manter sincronizado com a fonte remota. Eles lidam com caching, estados de carregamento/erro, refetching e deduplicação automaticamente, substituindo uma enorme quantidade de código manual. ## O problema: dados do servidor não são como estado de UI Os dados do servidor são *propriedade do servidor* e apenas armazenados em cache no cliente, então podem ficar **desatualizados**. Gerenciá-los manualmente significa reimplementar caching, rastreamento de carregamento/erro, refetching, tentativas e deduplicação para cada endpoint — propenso a erros e repetitivo. ## O que React Query oferece em um único hook ```jsx import { useQuery } from "@tanstack/react-query"; function Users() { const { data, isLoading, error, refetch } = useQuery({ queryKey: ["users"], // cache key queryFn: () => fetch("/api/users").then(r => r.json()), staleTime: 60_000, // consider fresh for 1 min }); if (isLoading) return ; if (error) return ; return ; } ``` Esse único hook fornece: ```text ✓ Caching — data cached by queryKey, shared across components ✓ Loading/error — isLoading/error states managed for you ✓ Deduplication — same query in 5 components = ONE network request ✓ Background refetch— refetch on window focus/reconnect to stay fresh ✓ Stale-while-revalidate — show cached data instantly, refetch in background ✓ Retries — auto-retry failed requests ✓ Pagination/infinite scroll, prefetching, cache invalidation ``` ## Mutações + invalidação de cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Após uma mutação, você invalida a query relevante e o cache refetches — mantendo a UI consistente com o servidor. ## Reduz suas necessidades de "estado global" ```text Much of what people put in Redux is actually SERVER state. Moving it to React Query often shrinks global state to just true UI state (theme, modals, filters) — simplifying the whole app. ``` ## Por que isso importa Server-state libraries resolvem um problema que ferramentas de estado genéricas (Redux, useState) lidam mal: manter um cache de cliente sincronizado com dados remotos. Elas substituem centenas de linhas de lógica manual de busca/caching/carregamento por hooks declarativos e fornecem comportamento sofisticado (dedup, refetch em background, stale-while-revalidate) que é difícil de construir corretamente à mão. Reconhecer que o estado do servidor merece sua própria ferramenta dedicada — e que adotar uma geralmente simplifica dramaticamente o estado global — é um dos insights de arquitetura frontend moderna mais impactantes.

O problema: dados do servidor não são como estado de UI

O que React Query oferece em um único hook

Mutações + invalidação de cache

Reduz suas necessidades de "estado global"

Por que isso importa

Perguntas relacionadas