การจัดการ State ใน React: ควรใช้ตอนไหนดี
คุณเริ่มโปรเจกต์ React ใหม่ ทุกอย่างดูสะอาดตา แต่แล้วคุณก็ต้องส่งข้อมูลผ่านเลเยอร์ต่างๆ ถึง 5 ชั้น นี่แหละคือปัญหา prop-drilling และคุณจะเริ่มรู้สึกไปไม่เป็น
เลือกเครื่องมือให้ถูกงาน
useState: กระเป๋าเสื้อของคุณ ใช้สำหรับข้อมูลภายใน (local data) เก็บสิ่งเล็กๆ น้อยๆ ไว้ที่นี่
- สถานะของ Dropdown
- ช่องกรอกข้อมูล (Input fields) เก็บไว้แค่ในระดับ local ก็พอ
Context API: ตู้เย็นของครอบครัว ทุกคนสามารถหยิบข้อมูลไปใช้ได้โดยไม่ต้องขอ ใช้สำหรับข้อมูลส่วนกลาง (global data)
- สถานะการเข้าสู่ระบบของผู้ใช้
- การตั้งค่าธีม
- การตั้งค่าภาษา ใช้กับข้อมูลที่มีการเปลี่ยนแปลงไม่บ่อยนัก
Zustand: ห้องเก็บของ เครื่องมือนี้มีความเป็นระเบียบสูง ใช้สำหรับข้อมูลจำนวนมาก (heavy data)
- ตะกร้าสินค้า
- แดชบอร์ดที่มีความซับซ้อน ใช้เมื่อแอปของคุณเริ่มจัดการยากหรือดูวุ่นวาย
แผนการทำงาน:
- เริ่มต้นด้วย useState
- เปลี่ยนไปใช้ Context เมื่อเริ่มเจอปัญหา prop-drilling
- เปลี่ยนไปใช้ Zustand เมื่อประสิทธิภาพเริ่มลดลง
เน้นความเรียบง่ายไว้ก่อน ขอให้สนุกกับการเขียนโค้ด
ที่มา: https://dev.to/zeeshan_farooq_4ead3782d8/react-state-management-when-to-use-what-a-simple-guide-1cf1