Hvordan velger du en state management-tilnærming i React?

Question

Accepted Answer

Tilpass verktøyet til **typen** tilstand, i stedet for å automatisk gripe til en global store. De fleste "global state"-problemer er egentlig bare feil verktøy for jobben.

## Hvorfor det er viktig

```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 viktigste innsiktet: server state ≠ client state

Data fra en API er en **cache** av ekstern data, ikke tilstand du eier. Å legge det i Redux betyr at du manuelt håndterer lasting, caching, refetching og invalidering — smertefullt og utsatt for feil. Et server-state-bibliotek gjør alt det:

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

## Retningslinjer

- Hold tilstand så **lokal** som mulig; plasser den nær der den brukes.
- Ikke legg raskt skiftende verdier i **Context** (det gjengir alle forbrukere på nytt).
- For delt client state med hyppige oppdateringer, foretrekk en store med **selective subscriptions** (Zustand/Jotai) slik at komponenter bare gjengis for skiven de leser.
- Bruk Redux Toolkit når du trenger devtools/middleware/struktur for genuint kompleks delt tilstand.

Den virkelige ferdigheten er **minimering og korrekt plassering** av tilstand — ikke å velge et bibliotek.