Hvordan vælger du en state management-tilgang i React?

Question

Accepted Answer

Match værktøjet til **arten** af state, i stedet for at gå efter et globalt store som standard. De fleste "global state"-problemer er egentlig det forkerte værktøj til jobbet.

## Hvorfor det betyder noget

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## Det vigtigste indsigt: server state ≠ client state

Data fra en API er en **cache** af fjerndata, ikke state som du ejer. At putte det i Redux betyder, at du manuelt håndterer loading, caching, refetching og invalidation — smertefuldt og fejlfattigt. Et server-state-bibliotek gør alt det:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Retningslinjer

- Hold state så **lokal** som muligt; placér det tæt på hvor det bruges.
- Lægger ikke hurtigt skiftende værdier i **Context** (det genrenderer alle consumers).
- For delt client state med hyppige opdateringer, foretrækker et store med **selective subscriptions** (Zustand/Jotai) så komponenter kun genrenderer for det segment de læser.
- Grib Redux Toolkit når du har brug for dets devtools/middleware/struktur på genuint kompleks delt state.

Den rigtige færdighed er **at minimere og korrekt placere** state — ikke at vælge et bibliotek.