การจัดการ State ใน React: จาก useState สู่ Zustand

State management เป็นหนึ่งในหัวข้อที่ถกเถียงมากที่สุดในโลก React มี library ให้เลือกมากมาย แต่ก่อนจะเลือก library ต้องเข้าใจก่อนว่า built-in tools ของ React เองทำอะไรได้บ้าง

useState: จุดเริ่มต้นของทุกอย่าง

useState เหมาะกับ local state ที่ใช้ใน component เดียว เช่น toggle menu, form input, counter ไม่จำเป็นต้องใช้ library ใหญ่สำหรับ state ง่าย ๆ แค่ useState ก็เพียงพอแล้ว

Context API: แชร์ state ข้าม component

เมื่อต้องส่ง state ข้ามหลาย component (prop drilling) Context API ช่วยแก้ปัญหานี้ได้ แต่ข้อควรระวังคือ เมื่อ context value เปลี่ยน ทุก component ที่ consume context นั้นจะ re-render ทั้งหมด จึงไม่เหมาะกับ state ที่เปลี่ยนบ่อย

Zustand: เรียบง่ายแต่ทรงพลัง

Zustand เป็น state management library ที่เบาและใช้ง่ายมาก สร้าง store ด้วยฟังก์ชันเดียว ไม่ต้อง wrap provider ไม่ต้องเขียน boilerplate เยอะ และ performance ดีเพราะ component จะ re-render เฉพาะเมื่อ state ที่ subscribe ไว้เปลี่ยนเท่านั้น เหมาะกับ global state ที่ต้องแชร์ข้ามหลาย component