Jak si v React vybereš přístup ke správě state?

Question

Accepted Answer

Přizpůsob nástroj **druhu** state, místo aby ses automaticky sáhnul po globálním store. Většina problémů s "globálním state" je vlastně nesprávný nástroj na práci.

## Průvodce rozhodováním

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

## Nejdůležitější poznatek: server state ≠ client state

Data z API je **cache** vzdálených dat, ne state, který vlastníš. Vložení do Redux znamená ručně řešit loading, caching, refetching a invalidaci — to je bolestivé a náchylné na chyby. Knihovna pro server state to všechno dělá:

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

## Pokyny

- Držuj state tak **lokální** jak je možné; umístuj jej blízko místa, kde se používá.
- Nedávej rychle se měnící hodnoty do **Context** (způsobuje re-render všech consumers).
- Pro sdílený client state s časými aktualizacemi preferuj store se **selektivními subscriptions** (Zustand/Jotai), aby se komponenty re-renderovaly pouze pro slice, který čtou.
- Sáhni po Redux Toolkit, když potřebuješ jeho devtools/middleware/strukturu na opravdu komplexní sdílený state.

Skutečná dovednost je **minimalizace a správné umístění** state — ne výběr knihovny.