مشكلة الاشتراك في المخازن الخارجية

المخزن الخارجي هو أي مصدر للحالة يعيش خارج شجرة React، مثل مخزن Redux، أو واجهة متصفح مثل matchMedia، أو كائن عادي على مستوى الوحدة يملك آلية subscribe الخاصة به.

لا يملك React هذه الحالة، لذلك يجب عليه الاشتراك في التغييرات وقراءة لقطات الحالة للحفاظ على مزامنة المكوّنات مع ما يحتفظ به المخزن حاليًا.

تقرأ إحدى الطرق الشائعة قيمة المخزن في useState، ثم تستخدم useEffect للاشتراك واستدعاء setState كلما تغيّر المخزن. ويبدو هذا ظاهريًا كافيًا لإبقاء المكوّن محدّثًا.

تنجح هذه الطريقة في التصيير المتزامن البسيط، لكنها تحتوي على عيب دقيق يظهر عندما يصيّر React بشكل متزامن ويتمكن من إيقاف العمل أو إعادة تشغيله في منتصفه.

يحدث التمزق عندما تعرض أجزاء مختلفة من واجهة المستخدم قيمًا مختلفة للمخزن نفسه أثناء دورة تصيير واحدة. فقد يقطع التصيير المتزامن العمل ويستأنفه، وقد يتغير المخزن في أثناء ذلك.

تكون النتيجة شاشة غير متسقة يعرض فيها أحد المكوّنات القيمة القديمة بينما يعرض الآخر القيمة الجديدة، وهو تناقض كان مستحيلًا عمليًا قبل ظهور الميزات المتزامنة.

تخيّل أن مكوّنات كثيرة تقرأ مخزن السمة بينما يصيّر React بشكل متزامن. إذا بدّل المستخدم إلى الوضع الداكن في منتصف العملية، فستعرض المكوّنات التي صُيّرت قبل التبديل السمة الفاتحة، بينما تعرض المكوّنات التي صُيّرت بعده السمة الداكنة.

ستحصل على شاشة نصفها فاتح ونصفها داكن لإطار واحد، لأن قيمة المخزن تغيّرت أثناء تصيير لم يتعامل معه React بوصفه عملية ذرّية.

تعمل التأثيرات بعد تثبيت التصيير، ولذلك لا يستطيع اشتراك يعتمد على useEffect ضمان تطابق القيمة المقروءة أثناء التصيير مع قيمة المخزن عند وقت التثبيت. إذ يُنفّذ الاشتراك متأخرًا بحيث لا يمنع عرضًا غير متسق.

وبحلول الوقت الذي يعيد فيه التأثير إنشاء الاشتراك ويحدّث الحالة، قد يكون الإطار غير المتسق عُرض للمستخدم بالفعل.

حاولت واجهة تجريبية سابقة تُسمى useMutableSource حل مشكلة القراءة الآمنة من المصادر الخارجية أثناء التصيير المتزامن، لكن ثبت أن استخدام واجهتها استخدامًا صحيحًا صعب، ولم تُطرح قط بإصدار مستقر.

استبدلها فريق React ببدائية أبسط وأسهل استخدامًا، تحقق ضمانات الاتساق نفسها من دون مواطن الخطأ الدقيقة في الواجهة السابقة.

يُعد useSyncExternalStore الخطاف الرسمي للاشتراك في المخازن الخارجية بطريقة آمنة أثناء التصيير المتزامن. فهو ينسّق مع React للحفاظ على اتساق القراءات خلال التصيير، ومنع حدوث التمزق في المكوّنات.

وأصبح البدائية الموصى بها لمؤلفي المكتبات الذين يحتاجون إلى ربط الحالة الخارجية بـ React بشكل موثوق أثناء التصيير المتزامن.

تأثرت مباشرةً مكتبات الحالة التي تشترك في المخازن الخارجية، ومنها Redux وMobX وValtio. وكان على كل منها اعتماد البدائية الجديدة للحفاظ على الأمان بعد إطلاق الميزات المتزامنة.

ولهذا حُدّثت روابط React الخاصة بها لاستدعاء useSyncExternalStore داخليًا بدلًا من الاعتماد على النمط الأقدم useState مع useEffect.

تضمن هذه الوصلة أن كل مكوّن يقرأ من المخزن أثناء عملية تصيير واحدة يرى اللقطة نفسها، كما تفرض إعادة تصيير متزامنة إذا تغيّر المخزن بطريقة قد تؤدي بخلاف ذلك إلى التمزق.

يمثّل هذا الجمع بين اللقطة المتسقة والأمان مع التزامن القيمة الأساسية التي توفرها الوصلة مقارنةً بالاشتراكات المُنفّذة يدويًا.

باستخدام useSyncExternalStore، تظل اشتراكاتك صحيحة مع تطور نموذج التصيير في React. فأنت تعتمد ضمانات إطار العمل بدلًا من إعادة تنفيذها بطريقة غير مثالية.

وهذا يجعلها الطريقة المستدامة والموصى بها لربط أي مصدر خارجي للحقيقة بمكوّنات React.

تحقق من معنى التمزق في التصيير المتزامن.

تعيش المخازن الخارجية خارج React، ولا يستطيع الاشتراك الساذج باستخدام useState مع useEffect منع التمزق عندما يصبح التصيير متزامنًا. إذ تعمل التأثيرات بعد فوات الأوان للحفاظ على اتساق القراءات أثناء عملية التصيير.

تستبدل useSyncExternalStore ‏useMutableSource المهجورة، وتوفر لقطة متسقة مع الأمان أثناء التزامن. وقد اعتمدتها مكتبات مثل Redux وMobX وValtio بوصفها البدائية التي تواكب المستقبل لاشتراكات المخازن.