Jotai เทียบกับ Zustand และ Context: ควรใช้แบบใด

React Context เหมาะอย่างยิ่งกับค่าระดับโลกที่เปลี่ยนแปลงไม่บ่อย เช่น ธีมปัจจุบัน ภาษาของผู้ใช้ สถานะการยืนยันตัวตน หรือโทเค็นของระบบการออกแบบ ค่าเหล่านี้มักกำหนดเพียงครั้งเดียวและแทบไม่เปลี่ยนแปลงระหว่างเซสชัน

API นี้มีอยู่ใน React อยู่แล้ว ไม่ต้องใช้สิ่งที่ต้องติดตั้งเพิ่ม และสื่อสารกับทีมได้อย่างชัดเจนว่า "ค่านี้ใช้ร่วมกันทั่วทั้งแอป"

เมื่อออบเจ็กต์ค่าของบริบทเปลี่ยนแปลง แม้จะเปลี่ยนเพียงฟิลด์เดียว ผู้ใช้บริบททุกตัวจะเรนเดอร์ใหม่ การทำเช่นนี้ยอมรับได้สำหรับการกำหนดค่าระดับโลกที่คงที่ แต่ส่งผลเสียอย่างรุนแรงกับสถานะที่เปลี่ยนแปลงถี่ เช่น ช่องกรอกข้อมูลในฟอร์มหรือแฟล็กแอนิเมชันของส่วนติดต่อผู้ใช้

การแยกบริบทออกเป็นส่วนย่อยที่เล็กลงช่วยบรรเทาปัญหาได้บางส่วน แต่รูปแบบนี้จะจัดการได้ยุ่งยากเมื่อระบบมีขนาดใหญ่

Zustand เหมาะอย่างยิ่งกับสถานะระดับแอปที่เปลี่ยนแปลงในระดับปานกลาง เช่น ค่ากำหนดของผู้ใช้ ตะกร้าสินค้า ประวัติการนำทาง หรือสถานะของตัวช่วยสร้างแบบหลายขั้นตอน การสมัครรับข้อมูลผ่านตัวเลือกช่วยป้องกันการเรนเดอร์ใหม่ของส่วนสถานะที่ไม่เกี่ยวข้อง

รูปแบบที่ใช้ store เป็นพื้นฐานคุ้นเคยสำหรับผู้ใช้ Redux และรวมสถานะที่เกี่ยวข้องไว้ในที่เดียว

store ของ Zustand ส่งออก Hook useBoundStore ให้ส่งตัวเลือกเข้าไป: useStore(state => state.cart) เพื่อสมัครรับข้อมูลเฉพาะส่วนย่อยของตะกร้าสินค้า คอมโพเนนต์ที่ใช้ตัวเลือกต่างกันจะทำงานแยกจากกัน คอมโพเนนต์ที่ใช้ตัวเลือกตะกร้าสินค้าจะไม่เรนเดอร์ใหม่เมื่อชื่อผู้ใช้เปลี่ยนแปลง

สิ่งนี้ทำให้ Zustand มีประสิทธิภาพในระดับส่วนย่อยใกล้เคียงกับ Jotai แต่ใช้ API ที่สั่งการโดยตรงมากกว่า

Jotai เหมาะอย่างยิ่งกับสถานะแบบตอบสนองที่มีรายละเอียดระดับเล็ก ซึ่งค่าที่เป็นอิสระต่อกันจำนวนมากเปลี่ยนแปลงบ่อย เช่น ค่าของช่องกรอกข้อมูลแต่ละช่องในฟอร์ม แฟล็กการเลือกของแต่ละแถว สถานะสวิตช์ของส่วนติดต่อผู้ใช้ หรือการสมัครรับข้อมูลแบบเรียลไทม์

รูปแบบหนึ่งอะตอมต่อหนึ่งค่าทำให้ใช้งานได้เป็นธรรมชาติเมื่อส่วนต่าง ๆ ของต้นไม้คอมโพเนนต์ต้องการส่วนย่อยของสถานะที่แตกต่างกันโดยสิ้นเชิง

ชุดรวมโค้ดของ Jotai มีขนาดเล็กกว่า Zustand เพราะมีความสามารถน้อยกว่า (ไม่มีระบบมิดเดิลแวร์และไม่มี devtools ในตัว) API ของ Jotai คล้าย useState อย่างมาก (useAtom ส่งคืน [value, setter]) จึงช่วยลดระยะเวลาเรียนรู้สำหรับนักพัฒนา React

API ของ Zustand มีลักษณะคล้าย Redux มากกว่า ได้แก่ กำหนด store ส่งออก Hook และใช้ตัวเลือก ไลบรารีทั้งสองรองรับ TypeScript ได้เป็นอย่างดี

ทั้ง Jotai และ Zustand รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วยกลยุทธ์การเติมข้อมูลที่เหมาะสม Jotai ใช้ Provider ร่วมกับ store แบบกำหนดเองสำหรับ SSR ส่วน Zustand ใช้ createStore สำหรับอินสแตนซ์ฝั่งเซิร์ฟเวอร์

ทั้งสองไลบรารีมีเจเนอริก TypeScript ระดับเต็มรูปแบบ ทำให้อนุมานชนิดข้อมูลของค่าอะตอมและ store ได้ครบถ้วนโดยไม่ต้องใส่คำอธิบายชนิดข้อมูลด้วยตนเอง

แอปที่ใช้งานจริงมักใช้ทั้งสามอย่างร่วมกัน ได้แก่ React Context สำหรับการกำหนดค่าแบบคงที่ (URL พื้นฐานของ API และแฟล็กความสามารถ), Jotai หรือ Zustand สำหรับสถานะเชิงโต้ตอบฝั่งไคลเอนต์ และ React Query หรือ SWR สำหรับข้อมูลที่ดึงจากเซิร์ฟเวอร์

เลเยอร์เหล่านี้ไม่ขัดแย้งกัน การผสมผสานโดยพิจารณาจากลักษณะของส่วนย่อยสถานะแต่ละส่วนอย่างมีเจตนา ถือเป็นแนวทางปฏิบัติที่ดีด้านสถาปัตยกรรม

หากทีมของคุณมีประสบการณ์กับ Redux โมเดลคลังสถานะของ Zustand จะให้ความรู้สึกเป็นธรรมชาติ หากทีมของคุณถนัด React-native เป็นอย่างดี API ของ Jotai ที่คล้ายกับ useState จะมีเส้นทางการเรียนรู้ที่ง่ายที่สุด

สำหรับแอปส่วนใหญ่ ความคุ้นเคยของทีมสำคัญกว่าความแตกต่างด้านประสิทธิภาพเพียงเล็กน้อย

สถานะของหน้าเว็บที่เรียบง่ายและมีตัวสลับไม่กี่ตัว: useState หรือ Context ก็เพียงพอแล้ว สถานะที่ใช้ข้ามคอมโพเนนต์สำหรับแอปขนาดกลาง: ใช้ Zustand หรือ Jotai ส่วนส่วนติดต่อผู้ใช้ที่มีการโต้ตอบสูงและมีค่าที่ตอบสนองอิสระหลายสิบค่า: Jotai โดดเด่นที่สุด

สำหรับข้อมูลฝั่งเซิร์ฟเวอร์ที่ซับซ้อนและต้องมีการแคช การรีเฟรชเบื้องหลัง และการอัปเดตเชิงคาดการณ์ ให้ใช้ไลบรารีจัดการสถานะฝั่งไคลเอ็นต์ใดก็ได้ร่วมกับ React Query

ใช้ Context สำหรับค่าทั่วไปที่ไม่เปลี่ยนแปลงหรือเปลี่ยนแปลงไม่บ่อย ใช้ Zustand สำหรับสถานะแอปพลิเคชันแบบรวมศูนย์ที่มีความถี่ในการอัปเดตปานกลาง ใช้ Jotai สำหรับสถานะที่ตอบสนองแบบละเอียดระดับอะตอมและมีการสมัครรับข้อมูลที่เป็นอิสระจำนวนมาก ใช้ React Query หรือ SWR สำหรับสถานะฝั่งเซิร์ฟเวอร์

หมวดหมู่เหล่านี้ไม่ได้แยกจากกันโดยสิ้นเชิง การจัดวางซ้อนกันตามประเภทของสถานะจะทำให้ได้สถาปัตยกรรมที่เป็นระเบียบและมีประสิทธิภาพ

เมื่อใดที่ Jotai เป็นตัวเลือกที่ดีกว่า React Context สำหรับการจัดการสถานะ

React Context เหมาะที่สุดสำหรับการตั้งค่าทั่วไปของแอปที่ไม่เปลี่ยนแปลง ส่วน Zustand เหมาะสำหรับสถานะแอปแบบรวมศูนย์ที่มีการสมัครรับข้อมูลตามตัวเลือก และ Jotai เหมาะสำหรับสถานะแบบอะตอมที่ละเอียด ซึ่งค่าที่เป็นอิสระจำนวนมากมีการอัปเดตบ่อย ทั้งสามอย่างสามารถทำงานร่วมกับไลบรารีจัดการสถานะฝั่งเซิร์ฟเวอร์อย่าง React Query ได้

ให้เลือกตามความถี่ในการอัปเดต ความซับซ้อนของสถานะ และความคุ้นเคยของทีม การใช้ทั้งสามอย่างผสมกันตามหมวดหมู่ของสถานะเป็นรูปแบบที่ถูกต้องและพบได้ทั่วไปในระบบที่ใช้งานจริง