Kako izbereš pristop k upravljanju stanja v React-u?

Question

Accepted Answer

Prilagodi orodje **vrsti** stanja, namesto da se privzeto obrneš na globalno shramba. Večina problemov s "globalnim stanjem" je pravzaprav napačno orodje za delo.

## Zakaj je to pomembno

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

## Najpomembnejši vpogled: server state ≠ client state

Podatki iz API-ja so **predpomnilnik** oddaljenih podatkov, ne stanje, ki ga posedaš. Njihovo umestitev v Redux pomeni ročno upravljanje nalaganja, predpomnenja, ponovnega pridobivanja in ničenja — boleče in nagnjeno k napakam. Knjižnica za upravljanje stanja strežnika to vse naredi:

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

## Smernice

- Stanje ohrani čim bolj **lokalno**; umesti ga blizu mesta, kjer se ga uporablja.
- Hitro spreminjajočih se vrednosti ne vstavljaj v **Context** (ponovno prikaže vse potrošnike).
- Za deljeno stanje klienta s pogostimi posodobitvami raje izberi shramba z **selective subscriptions** (Zustand/Jotai), da se komponente ponovno narišejo samo za rezino, ki jo berejo.
- Posegni po Redux Toolkit-u, ko potrebuješ njegov devtools/middleware/strukturo za resnično kompleksno deljeno stanje.

Prava spretnost je **zmanjšanje in pravilno postavljanje** stanja — ne izbira knjižnice.