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

Question

Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) er spesialisert på å håndtere **data hentet fra en server** — behandlet som en cache for å holde den synkronisert med kilden. De håndterer caching, lasting-/feiltilstander, re-fetching og deduplisering automatisk, noe som erstatter enorme mengder manuell kode. ## Problemet: serverdata er ikke som UI-tilstand Serverdata er *eid av serveren* og kun cached på klienten, så den kan bli **utdatert**. Manuell håndtering betyr reimplementering av caching, lasting-/feiløving, re-fetching, retries og deduplisering for hvert endepunkt — feilkrevende og repetitivt. ## Hva React Query gir deg i en 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 ; } ``` Den eneste hooken gir: ```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 ``` ## Mutasjoner + cache-invalidering ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Etter en mutasjon invaliderer du den relevante spørringen og cachen re-fetcher — holder UI konsistent med serveren. ## Det reduserer 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 er viktig Server-state libraries løser et problem som generiske state-verktøy (Redux, useState) håndterer dårlig: å holde en klient-cache synkronisert med fjerndata. De erstatter hundrevis av linjer med manuell henting/caching/lasting-logikk med deklarative hooks, og gir sofistikert oppførsel (dedup, bakgrunnshenting, stale-while-revalidate) som er vanskelig å bygge riktig for hånd. Å erkjenne at server-tilstand fortjener sitt eget dedikerte verktøy — og at å ta i bruk ett ofte forenkler global state dramatisk — er en av de mest impactfulle moderne frontend-arkitektur-innsiktene.