إذا كنت تستخدم Hook useSyncExternalStore في React، فمن المهم أن تعرف أنه يحتاج إلى لقطة بيانات جديدة كليًا لإظهار التغييرات على الشاشة، وليس فقط تعديلًا في البيانات داخل نفس اللقطة القديمة. كما يجب أن تتطابق قيمة البيانات الأولية مع ما رُسِم على الخادم في حالة استخدام SSR.
إذا كنت تستخدم Hook useSyncExternalStore في React، فمن المهم أن تعرف أنه يحتاج إلى لقطة بيانات جديدة كليًا لإظهار التغييرات على الشاشة، وليس فقط تعديلًا في البيانات داخل نفس اللقطة القديمة. هذا يعني أنه يجب عليك الانتباه جيدًا لكيفية تحديث بيانات متجرك الخارجي لضمان عرض واجهة المستخدم بشكل صحيح وتجنب المفاجآت غير المرغوبة.
لقد كشفت تجربة حديثة عن سلوك مهم لهذا الـ Hook. أظهرت التجربة أنه حتى لو قام متجرك الخارجي بإرسال إشعار إلى المشتركين بحدوث تغيير، فإن الشاشة لن تتحدث دائمًا. يحدث هذا عندما يتم تعديل كائن 'اللقطة' (snapshot) نفسه داخليًا دون إنشاء كائن جديد كليًا. على سبيل المثال، إذا كان لديك كائن لقطة يحتوي على خاصية «count» وقمت بتغيير قيمة هذه الخاصية مباشرة (مثل `snapshot.count = 1`) ثم أرسلت إشعارًا، فإن useSyncExternalStore لن يرى هذا التغيير كـ'تغيير' يستدعي إعادة الرسم. ستظل الشاشة تعرض القيمة القديمة.
السبب وراء هذا السلوك هو أن الـ Hook لا يعتمد فقط على الإشعارات. بل يحتاج أيضًا إلى أن تكون قيمة اللقطة التي تعيدها دالة `getSnapshot` مختلفة عن اللقطة السابقة عند مقارنتها باستخدام `Object.is`. إذا أعدت دائمًا نفس الكائن (حتى لو تغيرت خصائصه الداخلية)، فإن `Object.is` سيعتبرهما متطابقين، وبالتالي لن يقوم React بإعادة عرض المكون.
لكي يتفاعل useSyncExternalStore ويعرض التغييرات، يجب عليك إنشاء كائن لقطة جديد كليًا في كل مرة تتغير فيها البيانات. هذا ما يوضحه المثال المتاح في المصدر بـدالة `replace`، حيث تُنشئ لقطة جديدة مثل `snapshot = { count: 2 }`. عندئذٍ، يرى useSyncExternalStore كائنًا جديدًا بالكامل، ويدرك أن هناك تغييرًا حقيقيًا يجب عرضه على الشاشة. أما دالة `mutate` التي تعدل الكائن الحالي، فهي ليست النمط الموصى به للتطبيق.
وبالنسبة لتطبيقات Rendered Server-Side (SSR)، هناك نقطة حاسمة أخرى: القيمة الأولية التي يقرأها العميل عند تحميل الصفحة يجب أن تتطابق تمامًا مع القيمة التي استخدمت لتوليد HTML على الخادم. هذا يضمن تجربة مستخدم سلسة ومتسقة بين ما يراه في البداية من الخادم وما يراه بعد تولي React المسؤولية في المتصفح.
باختصار، العقد الرسمي لـ Hook useSyncExternalStore واضح: يجب عليك إرجاع نفس اللقطة طالما أن البيانات لم تتغير، وإرجاع لقطة جديدة غير قابلة للتغيير (immutable) عندما تتغير البيانات بالفعل. تجنب تعديل الكائن الحالي مباشرةً بعد الإشعارات. باتباع هذه الإرشادات، ستضمن أن تطبيقاتك التي تستخدم هذا الـ Hook تعمل بسلاسة وتحديث واجهة المستخدم بشكل موثوق عند الحاجة.
لقد كشفت تجربة حديثة عن سلوك مهم لهذا الـ Hook. أظهرت التجربة أنه حتى لو قام متجرك الخارجي بإرسال إشعار إلى المشتركين بحدوث تغيير، فإن الشاشة لن تتحدث دائمًا. يحدث هذا عندما يتم تعديل كائن 'اللقطة' (snapshot) نفسه داخليًا دون إنشاء كائن جديد كليًا. على سبيل المثال، إذا كان لديك كائن لقطة يحتوي على خاصية «count» وقمت بتغيير قيمة هذه الخاصية مباشرة (مثل `snapshot.count = 1`) ثم أرسلت إشعارًا، فإن useSyncExternalStore لن يرى هذا التغيير كـ'تغيير' يستدعي إعادة الرسم. ستظل الشاشة تعرض القيمة القديمة.
السبب وراء هذا السلوك هو أن الـ Hook لا يعتمد فقط على الإشعارات. بل يحتاج أيضًا إلى أن تكون قيمة اللقطة التي تعيدها دالة `getSnapshot` مختلفة عن اللقطة السابقة عند مقارنتها باستخدام `Object.is`. إذا أعدت دائمًا نفس الكائن (حتى لو تغيرت خصائصه الداخلية)، فإن `Object.is` سيعتبرهما متطابقين، وبالتالي لن يقوم React بإعادة عرض المكون.
لكي يتفاعل useSyncExternalStore ويعرض التغييرات، يجب عليك إنشاء كائن لقطة جديد كليًا في كل مرة تتغير فيها البيانات. هذا ما يوضحه المثال المتاح في المصدر بـدالة `replace`، حيث تُنشئ لقطة جديدة مثل `snapshot = { count: 2 }`. عندئذٍ، يرى useSyncExternalStore كائنًا جديدًا بالكامل، ويدرك أن هناك تغييرًا حقيقيًا يجب عرضه على الشاشة. أما دالة `mutate` التي تعدل الكائن الحالي، فهي ليست النمط الموصى به للتطبيق.
وبالنسبة لتطبيقات Rendered Server-Side (SSR)، هناك نقطة حاسمة أخرى: القيمة الأولية التي يقرأها العميل عند تحميل الصفحة يجب أن تتطابق تمامًا مع القيمة التي استخدمت لتوليد HTML على الخادم. هذا يضمن تجربة مستخدم سلسة ومتسقة بين ما يراه في البداية من الخادم وما يراه بعد تولي React المسؤولية في المتصفح.
باختصار، العقد الرسمي لـ Hook useSyncExternalStore واضح: يجب عليك إرجاع نفس اللقطة طالما أن البيانات لم تتغير، وإرجاع لقطة جديدة غير قابلة للتغيير (immutable) عندما تتغير البيانات بالفعل. تجنب تعديل الكائن الحالي مباشرةً بعد الإشعارات. باتباع هذه الإرشادات، ستضمن أن تطبيقاتك التي تستخدم هذا الـ Hook تعمل بسلاسة وتحديث واجهة المستخدم بشكل موثوق عند الحاجة.
