Kaip pasirinkti būsenos (state) valdymo metodą React?

Question

IT Interview Practice · Accepted Answer

Derinkite įranką prie **būsenos tipo**, o ne automatiškai siekite visuotinio store. Dauguma "visuotinės būsenos" problemų iš tikrųjų naudoja netinkamą įranką.

## Sprendimo vadovas

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

## Svarbiausias įžvalga: server state ≠ client state

Duomenys iš API yra **talpykla** (cache) nutolusių duomenų, ne jūsų valyta būsena. Dėti ją į Redux reiškia rankinio tvarkymą loading, caching, refetching ir invalidation — skausmu pilna ir klaidoms pakliari. Server-state biblioteka daro visa tai:

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

## Gairės

- Laikykite būseną **lokalia** kiek tik įmanoma; išdėstykite ją arti jos naudojimo vietos.
- Nesiųskite greitai besikeičiančių reikšmių į **Context** (ji iš naujo renderina visus vartotojus).
- Bendrai naudojamos kliento būsenai su dažnais atnaujinimais naudokite store su **selective subscriptions** (Zustand/Jotai), kad komponentai būtų iš naujo renderinami tik skyrių, kuriuos jie skaito.
- Griebkitės Redux Toolkit, kai jums reikalingus devtools/middleware/structure iš tikrųjų sudėtingai bendrai naudojamai būsenai.

Tikra išmintis yra **būsenos sumažinimas ir tinkamas išdėstymas** — ne bibliotekos pasirinkimas.

Sprendimo vadovas

Svarbiausias įžvalga: server state ≠ client state

Gairės

Susiję klausimai