ปัญหาของการสมัครรับข้อมูลจากสโตร์ภายนอก

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

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

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

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

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

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

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

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

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

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

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

ทีมรีแอ็กต์จึงแทนที่ด้วยกลไกพื้นฐานที่เรียบง่ายและใช้งานเป็นธรรมชาติมากกว่า ซึ่งให้การรับประกันความสอดคล้องแบบเดียวกันโดยไม่มีจุดที่ใช้งานพลาดได้ง่าย

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

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

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

ด้วยเหตุนี้การเชื่อมต่อกับรีแอ็กต์ของไลบรารีเหล่านี้จึงได้รับการอัปเดตให้เรียก useSyncExternalStore ภายใน แทนการพึ่งพารูปแบบ useState ร่วมกับ useEffect แบบเก่า

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

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

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

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

ยืนยันความหมายของข้อมูลฉีกขาดในการเรนเดอร์พร้อมกัน

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

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