Hur väljer du ett tillvagaskrivningshanteringsförhållningssätt i React?

Question

Accepted Answer

Matcha verktyget till **typen** av tillstånd, istället för att automatiskt gripa till ett globalt lager. De flesta "globalt tillstånds"-problem är egentligen fel verktyg för jobbet.

## Varför det är viktigt

```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)
```

## Den viktigaste insikten: serverstate ≠ klientstate

Data från ett API är en **cache** av fjärrdata, inte tillståndet du äger. Att placera det i Redux betyder att du manuellt hanterar laddning, caching, omhämtning och invalidering — smärtsamt och felbenäget. Ett serverstate-bibliotek gör allt det:

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

## Riktlinjer

- Håll tillståndet så **lokalt** som möjligt; placera det nära där det används.
- Lägg inte snabbföränderliga värden i **Context** (det återrenderar alla konsumenter).
- För delat klienttillståndet med täta uppdateringar, föredra ett lager med **selektiva prenumerationer** (Zustand/Jotai) så komponenter bara återrenderas för den del de läser.
- Gripa till Redux Toolkit när du behöver dess devtools/middleware/struktur på verkligt komplext delat tillståndet.

Den riktiga färdigheten är **minimering och korrekt placering** av tillståndet — inte att välja ett bibliotek.