การอ่านและเขียนอะตอมด้วย useAtom

useAtom(someAtom) ส่งคืน [value, setter] ซึ่งมีรูปแบบสอดคล้องกับ API ของ useState โดย value คือสถานะปัจจุบันของอะตอม ส่วน setter ใช้ปรับปรุงสถานะ ควรใช้สิ่งนี้เมื่อคอมโพเนนต์ทั้งอ่านและเขียนค่าอะตอม

setter รับได้ทั้งค่าใหม่หรือฟังก์ชันอัปเดต: setCount(c => c + 1)

useAtomValue(someAtom) ส่งคืนเฉพาะค่าปัจจุบัน โดยไม่มี setter ควรใช้ในคอมโพเนนต์ที่มีหน้าที่แสดงผลอย่างเดียว ซึ่งอ่านสถานะแต่ไม่เคยแก้ไขสถานะ

เนื่องจากคอมโพเนนต์ไม่มีการอ้างอิง setter เจตนาของโค้ดจึงสื่อไว้อย่างชัดเจนว่า คอมโพเนนต์นี้มีหน้าที่อ่านข้อมูลเพียงอย่างเดียว

useSetAtom(someAtom) ส่งคืนเฉพาะฟังก์ชัน setter ที่สำคัญคือ มันจะไม่ทำให้คอมโพเนนต์สมัครรับค่าของอะตอม คอมโพเนนต์จึงไม่เรนเดอร์ใหม่เมื่ออะตอมเปลี่ยนแปลง

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

คอมโพเนนต์ที่เรียกใช้ useSetAtom(countAtom) เพื่อเพิ่มตัวนับจะไม่เรนเดอร์ใหม่เมื่อ countAtom เปลี่ยนแปลง เพราะคอมโพเนนต์นั้นไม่ได้สมัครรับค่า มีเพียงคอมโพเนนต์ที่แสดงค่าตัวนับเท่านั้นที่เรนเดอร์ใหม่

นี่เป็นการปรับให้เหมาะสมที่เรียบง่ายแต่ทรงพลัง โดยแยกผู้เขียนข้อมูลออกจากผู้อ่านข้อมูลเพื่อป้องกันการเรนเดอร์ใหม่ที่ต่อเนื่องกันเป็นลูกโซ่

นำเข้า atomWithStorage จาก jotai/utils ใช้งานเหมือน atom() ได้ทุกประการ แต่ส่งคีย์ของพื้นที่จัดเก็บเป็นอาร์กิวเมนต์แรก: atomWithStorage('theme', 'light') อะตอมจะซิงค์กับ localStorage โดยอัตโนมัติ

เมื่อโหลดหน้าเว็บใหม่ อะตอมจะกู้ค่าจาก localStorage คอมโพเนนต์ทั้งหมดที่อ่านอะตอมนี้จะได้รับค่าที่บันทึกไว้ทันที

สามารถส่งสัญลักษณ์ RESET จาก jotai/utils ให้ setter ของอะตอมที่สร้างด้วย atomWithStorage ได้: setter(RESET) การทำเช่นนี้จะลบรายการใน localStorage และรีเซ็ตอะตอมกลับเป็นค่าเริ่มต้น

วิธีนี้มีประโยชน์สำหรับขั้นตอนการออกจากระบบหรือปุ่ม "รีเซ็ตเป็นค่าเริ่มต้น" ในหน้าการตั้งค่า

atomFamily จาก jotai/utils สร้างโรงงานที่ส่งคืนอะตอมซึ่งมีพารามิเตอร์ ตัวอย่างเช่น atomFamily(id => atom(null)) จะสร้างอะตอมแยกกันสำหรับ id ที่ส่งเข้ามาแต่ละค่าซึ่งไม่ซ้ำกัน

วิธีนี้เหมาะอย่างยิ่งสำหรับสถานะแยกตามรายการ เช่น selectedAtom(itemId) หรือ expandedAtom(rowId) โดยไม่ต้องจัดการอะตอมแผนที่ขนาดใหญ่เพียงตัวเดียว

กลุ่มอะตอมอาจขยายตัวโดยไม่มีขอบเขตหากมีการสะสม ID ควรใช้ atomFamily.setShouldRemove((createdAt, param) => ...) เพื่อกำหนดเพรดิเคตสำหรับการล้างข้อมูล ซึ่ง Jotai จะเรียกใช้เมื่อตัดสินใจนำสมาชิกกลุ่มที่เก่าออก

สำหรับรายการที่มีการเพิ่มและลบรายการ ควรล้างรายการของกลุ่มอะตอมทุกครั้งที่ลบรายการ เพื่อป้องกันหน่วยความจำรั่ว

แพ็กเกจ jotai-devtools มีแผงภาพที่แสดงรายการอะตอมที่ทำงานอยู่ทั้งหมดพร้อมค่าปัจจุบัน ติดตั้งแพ็กเกจนี้ ห่อแอปด้วย DevTools แล้วตรวจสอบสถานะของอะตอมได้แบบเรียลไทม์

การอัปเดตอะตอมแต่ละครั้งจะถูกบันทึกล็อกพร้อมค่าก่อนหน้าและค่าถัดไป ทำให้การแก้ไขปัญหาการทำงานร่วมกันของอะตอมที่ซับซ้อนทำได้ตรงไปตรงมา

ในรายการขนาดใหญ่ คอมโพเนนต์ ListContainer สามารถใช้ useSetAtom(selectedIdAtom) เพื่ออัปเดตการเลือกโดยไม่สมัครรับข้อมูลจาก selectedIdAtom มีเพียงคอมโพเนนต์ ListItem แต่ละรายการที่เรียกใช้ useAtomValue(selectedIdAtom) เท่านั้นที่จะเรนเดอร์ใหม่เมื่อการเลือกเปลี่ยนแปลง

รูปแบบนี้รองรับการขยายได้ดี การเพิ่มรายการหลายพันรายการไม่ทำให้การอัปเดตการเลือกช้าลง

เลือก Hook ให้ตรงกับความต้องการของคอมโพเนนต์: ใช้ useAtomValue สำหรับการแสดงผลอย่างเดียว ใช้ useSetAtom สำหรับการดำเนินการอย่างเดียว และใช้ useAtom เมื่อต้องการทั้งสองอย่าง การออกแบบ API อย่างมีเจตนานี้ทำให้เห็นความรับผิดชอบของคอมโพเนนต์ได้อย่างชัดเจนในทันที

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

ข้อได้เปรียบสำคัญของการใช้ useSetAtom แทน useAtom คืออะไร

useAtom ให้ทั้งค่าและ setter, useAtomValue ให้เฉพาะค่า (การสมัครรับข้อมูลเพื่ออ่าน), ส่วน useSetAtom ให้เฉพาะ setter (ไม่เรนเดอร์ใหม่เมื่อค่าเปลี่ยนแปลง) atomWithStorage จะบันทึกข้อมูลไว้ใน localStorage และรองรับ RESET ส่วน atomFamily จะสร้างอะตอมแยกตามพารามิเตอร์สำหรับรายการแบบไดนามิก

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