Hogyan választasz állapotkezelési megközelítést a Reactban?

Question

Accepted Answer

Illeszd az eszközt az **állapot típusához**, ne nyúlj reflexből egy globális tárolóhoz. A legtöbb "globális állapot" probléma valójában a rossz eszköz a munkához.

## Döntési útmutató

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

## A legfontosabb felismerés: szerver állapot ≠ kliens állapot

Az API-ból érkező adatok a távoli adatok egy **gyorsítótára**, nem olyan állapot, amelyet te birtokolsz. Ha Redux-ban teszed el, manuálisan kell kezelned a betöltést, gyorsítótárazást, újra lekérést és érvénytelenítést — fájdalmas és hibalehetőségekben gazdag. Egy szerver-állapot függvénytár mindezt megteszi:

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

## Irányelvek

- Tartsd az állapotot a lehető **leghelyibbnek**; helyezd azt közel ahhoz, ahol használod.
- Ne tegyél gyorsan változó értékeket **Context**-be (az összes fogyasztót újrarendereli).
- Megosztott kliens állapothoz gyakori frissítésekkel részesítsd előnyben az **szelektív feliratkozásokkal** rendelkező tárolót (Zustand/Jotai), így a komponensek csak az általuk olvasott szeletért fognak újrarenderelődni.
- Használd a Redux Toolkit-et, amikor szükséged van annak devtools/middleware/struktúrájára valóban összetett megosztott állapotban.

A valódi készség az állapot **minimalizálása és helyes elhelyezése** — nem pedig egy könyvtár kiválasztása.