React Context vs Zustand: ควรใช้ตัวไหนเมื่อไหร่
นักพัฒนามักทำผิดพลาดอย่างหนึ่งเกี่ยวกับ React state นั่นคือการใช้ Context อย่างไม่ถูกต้อง แล้วก็ไปโทษว่า Context เป็นต้นเหตุของปัญหาด้านประสิทธิภาพ
ปัญหามักเกิดจากการใช้ context object ขนาดใหญ่เพียงอันเดียว เมื่อค่าใดค่าหนึ่งใน object นั้นเปลี่ยน ทุก component ที่ใช้ context นั้นจะเกิดการ re-render แม้ว่า component นั้นจะต้องการข้อมูลเพียงแค่ส่วนเล็กๆ ส่วนเดียว แต่มันก็ยังต้องตอบสนองต่อทุกการเปลี่ยนแปลงที่เกิดขึ้นใน object นั้น
หากการแจ้งเตือน (notifications) ของคุณอัปเดตทุกๆ 30 วินาที Navbar ของคุณก็จะ re-render ใหม่ แม้ว่า Navbar จะสนใจแค่ชื่อผู้ใช้ก็ตาม สิ่งนี้จะทำลายประสิทธิภาพการทำงานของแอป
คุณสามารถแก้ไขปัญหานี้ได้โดยไม่ต้องใช้ library เลย เพียงแค่แยก context ของคุณตามความถี่ในการเปลี่ยนแปลง
แทนที่จะใช้ context ใหญ่เพียงอันเดียว ให้ใช้หลายอันแทน: • UserContext สำหรับข้อมูลผู้ใช้ • UIContext สำหรับสถานะของ sidebar • NotificationContext สำหรับการแจ้งเตือน
ตอนนี้ Navbar ของคุณจะ re-render เฉพาะเมื่อข้อมูลผู้ใช้เปลี่ยนเท่านั้น การแยกแบบง่ายๆ นี้ช่วยแก้ปัญหาเรื่องประสิทธิภาพส่วนใหญ่ได้
ใช้ React Context สำหรับค่าที่มีความเสถียร (stable values): • Themes • Auth status • Language settings
Context ยังทำงานได้ดีกับ Server Components ในขณะที่ Zustand ทำงานได้เฉพาะฝั่ง client เท่านั้น
ใช้ Zustand เมื่อคุณต้องการการสมัครรับข้อมูลแบบเลือกเฉพาะส่วน (selective subscriptions) Zustand ช่วยให้ component สามารถ subscribe ไปยัง state เฉพาะบางส่วน (slices) ได้ หากส่วนใดส่วนหนึ่งของ store เปลี่ยนแปลง จะมีเพียง component ที่เฝ้าดูส่วนนั้นอยู่เท่านั้นที่ re-render
ใช้ตรรกะนี้สำหรับ state ใหม่:
ใช้ React Context ถ้า: • ข้อมูลมีความเสถียร (theme, auth, locale) • คุณต้องการให้ทำงานร่วมกับ SSR หรือ Server Components ได้ • คุณต้องการหยุดปัญหา prop drilling โดยการแยก context
ใช้ Zustand ถ้า: • ข้อมูลมีการเปลี่ยนแปลงบ่อยครั้ง • Component จำเป็นต้องเฝ้าดู state เฉพาะบางส่วน (slices) • ตรรกะ (logic) ของคุณมีความซับซ้อน
เดี๋ยวก่อน อย่าใช้ทั้งสองอย่างนี้กับข้อมูลจาก API หากคุณกำลังดึงข้อมูลจาก server ให้ใช้ TanStack Query เพราะ Context และ Zustand ไม่ได้จัดการเรื่องการทำ caching หรือการทำ background refetching
สรุป: • การใช้ context object ขนาดใหญ่เพียงอันเดียวทำให้เกิดการ re-render ควรแยกมันออก • การใช้ Zustand สำหรับค่าที่มีความเสถียรนั้นเกินความจำเป็น (overkill) • การใช้ Context สำหรับข้อมูลที่มีการเปลี่ยนแปลงบ่อยจะทำให้เกิดอาการหน่วง (lag) • การใช้ Zustand สำหรับ server state เป็นการเลือกใช้เครื่องมือที่ผิดประเภท