Hvorfor bruge et server-state-bibliotek som React Query?

Question

Accepted Answer

**Server-state-biblioteker** (React Query/TanStack Query, SWR, RTK Query) er specialiseret i at håndtere **data hentet fra en server** — de behandler det som en cache, der skal holdes synkroniseret med den eksterne kilde. De håndterer caching, loading/error-tilstande, refetching og deduplicering automatisk, hvilket erstatter en enorm mængde manuel kode. ## Problemet: server-data ligner ikke UI-state Server-data er *ejet af serveren* og blot cachelagret på klienten, så det kan blive **forældet**. Manuel håndtering betyder at reimplementere caching, loading/error-tracking, refetching, retries og deduplicering for hvert endpoint — fejlbenægt og repetitiv. ## Hvad React Query giver dig i en enkelt 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 ; } ``` Denne enkelt hook giver: ```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 ``` ## Mutations + cache-invalidering ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Efter en mutation invaliderer du den relevante query, og cachen refetcher — hvilket holder UI'et konsistent med serveren. ## Det reducerer dine "global state"-behov ```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. ``` ## Hvorfor det betyder noget Server-state-biblioteker løser et problem, som generiske state-værktøjer (Redux, useState) håndterer dårligt: at holde en klient-cache synkroniseret med eksterne data. De erstatter hundredvis af linjer manual fetching/caching/loading-logik med deklarative hooks og giver sofistikeret adfærd (dedup, background refetch, stale-while-revalidate), som er svær at bygge korrekt i hånden. At genkende, at server-state fortjener sit eget dedikerede værktøj — og at vedtagelse af et sådant ofte dramatisk forenkler global state — er en af de mest impactfulde moderne frontend-arkitektur-indsigter.