Bagaimanakah anda memutuskan di mana setiap bahagian state harus berada?

Question

Accepted Answer

Memutuskan **di mana state hidup** adalah salah satu kemahiran seni bina yang paling penting. Prinsip panduan: letakkan setiap bahagian state dalam **skop paling sempit** yang masih memuaskan semua orang yang membutuhkannya — dan padankan setiap *jenis* state dengan alat yang tepat.

## Rangka kerja keputusan

```text
1. Who needs this state?
   - One component                  → local state (useState)
   - A few related components        → lift to common parent / small context
   - Many distant components         → global store or context

2. What KIND of state is it?
   - Server/remote data              → server-state library (React Query/SWR)
   - UI/client state                 → useState / Zustand / Redux
   - URL-derivable (filters, page)    → the URL (searchParams)
   - Form input                       → form library or local state

3. How OFTEN does it change?
   - Rarely, widely shared (theme)    → Context is fine
   - Frequently, widely shared        → store with selective subscriptions
```

## Kategori dan rumah mereka

```text
State type     Lives in                       Examples
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      lifted parent / Context / store modal state, selected item
Server data    React Query / SWR / RTK Query  users, products (cached remote)
URL state      router / searchParams          filters, page, search query, tab
Form state     React Hook Form / local         field values, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## Kesalahan umum yang dicegah rangka kerja

```text
❌ Server data in Redux       → use React Query (it's a cache, not UI state)
❌ Everything global "just in case" → over-coupling, extra re-renders; keep local
❌ Filters/page in state       → put in the URL (shareable, bookmarkable, back-button)
❌ Duplicating derivable values → derive instead (single source of truth)
❌ Form state in a global store → usually overkill; keep local or use a form lib
```

## URL adalah state yang kurang digunakan

```text
Filters, pagination, search, active tab → belong in the URL.
Benefits: shareable links, browser back/forward works, survives refresh, SEO.
```

## Mengapa ia penting

Di mana state hidup menentukan kesederhanaan, prestasi, dan kebolehterimaan aplikasi.

Kemahiran ialah menahan desakan untuk menjadikan segala sesuatu global dan sebaliknya **melokalisir secara lalai, memadankan setiap jenis state dengan alat yang betul** (data pelayan → React Query, boleh diperoleh dari URL → URL, UI → tempatan/store).

Mendapatkan ini dengan betul mengelakkan masalah seni bina yang paling biasa — data pelayan yang dimasukkan ke dalam Redux, state yang terlalu diglobalkan menyebabkan render semula, dan penapis dalam keadaan komponen dan bukannya URL.

Pengiraan ini ialah yang memisahkan seni bina state yang bersih dan boleh skala daripada yang berbelitan.