Piye carane milih pendekatan manajemen state ing React?

Question

Accepted Answer

Selarasake alat kasebut karo **jenis** state, tinimbang langsung ngangkat global store. Akeh-akeh masalah "global state" pancen nggunakake alat sing salah.

## Panduan keputusan

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

## Wawasan paling penting: server state ≠ client state

Data saka API yaiku **cache** saka data remote, dudu state sing sampeyan duwe. Nglebokake dheweke ing Redux tegese sampeyan kudu nangani loading, caching, refetching, lan invalidation kanthi manual — sakit lan gampang salah. Library server-state nggawa kabeh kuwi:

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

## Panduan

- Pangaten state supaya **local** kadhang-kadhang; colocate ing cedhak karo panggunaane.
- Aja nglebokake nilai berubah-ubah cepet ing **Context** (iku re-renders kabeh consumers).
- Kanggo shared client state karo update kerep-kerep, lebih milih store kanthi **selective subscriptions** (Zustand/Jotai) supaya components mung re-render kanggo slice sing dibaca.
- Angkat Redux Toolkit nalika sampeyan butuh devtools/middleware/structure ing state shared sing temenan kompleks.

Keahlian nyata yaiku **ngecilake lan nempatan state kanthi bener** — dudu milih library.