Bagaimana anda memilih pendekatan pengurusan state di React?

Question

Accepted Answer

Padankan alat dengan **jenis** state, daripada secara otomatis mencari global store. Kebanyakan masalah "global state" sebenarnya adalah alat yang salah untuk pekerjaan itu.

## 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 dari API adalah **cache** dari data jarak jauh, bukan state yang anda miliki. Memasukkannya ke Redux berarti anda menangani loading, caching, refetching, dan invalidation secara manual — menyakitkan dan rawan kesalahan. Perpustakaan server-state melakukan semua itu:

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

## Panduan

- Simpan state sedekat mungkin **lokal**; colocate dengan tempat penggunaannya.
- Jangan masukkan nilai yang berubah cepat ke dalam **Context** (itu me-render ulang semua consumers).
- Untuk shared client state dengan pembaruan yang sering, lebih baik gunakan store dengan **selective subscriptions** (Zustand/Jotai) sehingga komponen hanya me-render ulang untuk slice yang mereka baca.
- Gunakan Redux Toolkit ketika anda membutuhkan devtools/middleware/structure-nya pada state bersama yang benar-benar kompleks.

Keterampilan sebenarnya adalah **meminimalkan dan menempatkan state dengan benar** — bukan memilih perpustakaan.