Context เป็นโซลูชันสถานะที่ดีเมื่อใด และเมื่อไม่ใช่

Question

Accepted Answer

React **Context API** ช่วยให้คุณแชร์ค่าไปยังซับทรี่คอมโพเนนต์ทั้งหมดโดยไม่ต้อง prop drilling มันเหมาะสำหรับ **ข้อมูลที่เปลี่ยนแปลงไม่บ่อย และใช้ร่วมกันอย่างแพร่หลาย** — แต่มันไม่ใช่ *โซลูชันจัดการสถานะแบบเต็ม* และมี pitfall re-render สำหรับสถานะที่เปลี่ยนแปลงบ่อย ## เมื่อ Context ส่องสว่าง ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## Pitfall: ผู้บริโภคทุกคน re-render เมื่อ ANY การเปลี่ยนแปลง ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` เมื่อค่า context เปลี่ยน **ทั้งหมด** คอมโพเนนต์ที่ใช้ context นี้จะ re-render — ไม่ว่าพวกเขาจะใช้ส่วนที่เปลี่ยนแปลงหรือไม่ สำหรับสถานะที่อัปเดตบ่อย สิ่งนี้จะทำให้เกิดปัญหาประสิทธิภาพ Context ไม่มีการสมัครสมาชิกแบบเลือกสรร ## การบรรเทา และทางเลือก ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` ไลบรารี่สถานะ (Zustand, Redux, Jotai) แก้ปัญหา re-render ด้วย **การสมัครสมาชิกแบบเลือกสรร** — คอมโพเนนต์สมัครสมาชิกเฉพาะ slices ที่พวกเขาใช้ และ re-render เฉพาะเมื่อสิ่งเหล่านั้นเปลี่ยนแปลง: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context ไม่ใช่ตัวจัดการสถานะ ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## ทำไมถึงมีความสำคัญ การรู้จุดที่ดีที่สุดของ Context — และข้อจำกัดของมัน — ป้องกันข้อผิดพลาดทั่วไปสองอย่าง: prop-drilling สิ่งที่ควรอยู่ใน Context และใส่สถานะความถี่สูงใน Context (ทำให้เกิด app-wide re-renders) กฎ: Context สำหรับ **ค่าที่เปลี่ยนแปลงไม่บ่อย ใช้ร่วมกันอย่างแพร่หลาย** (theme, user, locale); โครงสร้างเฉพาะที่มีการสมัครสมาชิกแบบเลือกสรรสำหรับ **สถานะที่เปลี่ยนแปลงบ่อย หรือขนาดใหญ่** ที่ใช้ร่วมกัน การเข้าใจว่า Context แจกจ่ายสถานะแต่ไม่จัดการมัน ชี้แจงว่าเมื่อใดเพียงพอและเมื่อใดที่คุณต้องการมากขึ้น