Context ช่วยให้คุณแชร์ค่าหนึ่งกับ subtree ทั้งหมด โดยไม่ต้องส่ง props ผ่านทุกระดับ (prop drilling) คุณสร้าง context, ห่อ subtree ในสาขา Provider ของมัน และ descendant ใดๆ อ่านมันด้วย useContext
= ();
() {
(
);
}
() {
theme = ();
;
}
ข้อมูลความถี่ต่ำ, "global-ish" ที่หลายคอมโพเนนต์ต้องการ: theme, current user, locale, feature flags
เมื่อ Provider's value เปลี่ยน, ทุก component ที่ใช้ context จะ re-render — ไม่มีวิธีสมัครสมาชิกเพียงส่วนหนึ่งของมัน ผลลัพธ์ที่ใช้ได้จริงสองประการ:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
สำหรับสถานะที่ เปลี่ยนแปลงบ่อยครั้ง หรือขนาดใหญ่, แบ่ง context ออกเป็นชิ้นที่เล็กกว่า หรือใช้ store (Zustand/Redux) ที่รองรับการสมัครสมาชิกแบบเลือกสรร Context คือเครื่องมือ dependency-injection, ไม่ใช่ state manager แบบเต็ม