คุณเลือก state management approach ใน React อย่างไร

Question

Accepted Answer

จับคู่เครื่องมือกับ **ประเภท** ของ state มากกว่าการหยุดไปยัง global store โดยค่าเริ่มต้น ปัญหา "global state" ส่วนใหญ่เป็นเครื่องมือที่ผิดสำหรับงาน

## คำแนะนำการตัดสินใจ

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

## Insight ที่สำคัญที่สุด: server state ≠ client state

ข้อมูลจาก API คือ **cache** ของข้อมูลระยะไกล ไม่ใช่ state ที่คุณเป็นเจ้าของ การใส่ลงใน Redux หมายความว่าคุณต้องจัดการ loading, caching, refetching และ invalidation ด้วยตนเอง — เจ็บปวดและเสี่ยงต่อข้อผิดพลาด ไลบรารี server-state ทำทั้งหมด:

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

## แนวทาง

- เก็บ state ให้ **local** ได้มากที่สุด; วางไว้ใกล้กับที่ใช้งาน
- อย่าใส่ค่าที่เปลี่ยนแปลงเร็ว ๆ ใน **Context** (มันจะ re-render ผู้บริโภคทั้งหมด)
- สำหรับ shared client state ที่มีการอัปเดตบ่อย ๆ ให้ชื่นชอบ store ด้วย **selective subscriptions** (Zustand/Jotai) เพื่อให้ components re-render เฉพาะ slice ที่พวกเขาอ่าน
- หยุดไปยัง Redux Toolkit เมื่อคุณต้องการ devtools/middleware/structure ของมันบน genuinely complex shared state

ทักษะที่แท้จริง คือ **minimizing และวาง state อย่างถูกต้อง** — ไม่ใช่การเลือกไลบรารี