State Management & Data Flow

คำถามเดียว

เกือบทุกการถกเถียงว่า “จัดการ state ใน React ยังไง?” จริง ๆ แล้วคือคำถามเดียว: state ก้อนนี้ควรอยู่ที่ไหน? React ให้บันไดของคำตอบมา และทักษะคือปีนขึ้นไปแค่เท่าที่จำเป็น

flowchart TB
  local["Local state
(useState ใน component เดียว)"] --> lifted["Lifted state
(ย้ายไป common ancestor)"]
  lifted --> context["Context
(แชร์ลงไปทั้ง subtree)"]
  context --> store["External store
(Zustand / Redux / Jotai)"]
  note["ปีนขึ้นแค่เท่าที่จำเป็น"] -.-> local

บันไดตำแหน่งของ state

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Lifting & composition	lifting state ขึ้น, prop drilling และแก้ด้วย composition
Context	`useContext`, เมื่อไรเหมาะ และเมื่อไรเจ็บ
useReducer patterns	reducer และ pattern context + reducer สำหรับ app state
External stores	เมื่อไรควรใช้ store และ `useSyncExternalStore`

หลักการนำทาง

เริ่มที่ขั้น ต่ำสุด ที่ใช้ได้ก่อน เก็บ state ไว้ local จนกว่าจะมีสอง component ต้องใช้ร่วมกัน แล้วค่อย lift ขึ้นไปที่ parent ร่วม ใช้ Context เฉพาะเมื่อข้อมูลถูกแชร์ทั้ง subtree จริง ๆ และเปลี่ยนไม่บ่อย (theme, auth, locale) ใช้ external store เฉพาะเมื่อพฤติกรรมการ re-render ของ Context หรือรูปร่างของข้อมูลเริ่มเจ็บปวด

state ส่วนใหญ่ไม่ต้องใช้ library ความซับซ้อนของ “state management” จำนวนมากมาจากการรีบปีนขึ้นไปบนสุดของบันได ทั้งที่ useState สูงขึ้นไปสอง component ก็จบงานแล้ว