Kuinka valitset tilahallintostrategian Reactissa?

Question

Accepted Answer

Sovita työkalu **tilatyypin** mukaan sen sijaan, että valitsisit globaalin kaupan oletusarvoisesti. Useimmat "globaalin tilan" ongelmat ovat oikeastaan väärä työkalu työhön.

## Päätösopas

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

## Tärkein oivallus: palvelimen tila ≠ asiakastila

API:sta saatu data on **välimuisti** etäkohdan tiedoista, ei tila joka sinulla on. Sen laittaminen Reduxiin tarkoittaa, että hallitset manuaalisesti lataamista, välimuistiin talletusta, uudelleenhakua ja mitätöintiä — kivuliasta ja virhealtista. Palvelimen tilan kirjasto tekee kaiken tämän:

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

## Ohjeet

- Pidä tila niin **paikallisena** kuin mahdollista; sijoita se lähelle missä sitä käytetään.
- Älä laita nopeasti muuttuvia arvoja **Contextiin** (se uudelleenrender öi kaikki kuluttajat).
- Jaetulla asiakastilalla, jossa on usein päivityksiä, suosi varastoa **valikoivilla tilauksilla** (Zustand/Jotai), jotta komponentit renderöivät uudelleen vain niille loukille joita ne lukevat.
- Turvaudu Redux Toolkitiin, kun tarvitset sen devtools/middleware/rakennetta todella monimutkaisella jaetulla tilalla.

Oikea taito on **tilan minimointi ja oikea sijoittaminen** — ei kirjaston valitseminen.