React useSyncExternalStore: إتقان مزامنة الحالة الخارجية

useSyncExternalStore هو خطاف (hook) في React تم تقديمه في الإصدار 18، يسمح لك بالاشتراك في مصادر البيانات الخارجية وقراءتها بطريقة متوافقة مع التصيير المتزامن (concurrent rendering). يسد هذا الخطاف الفجوة بين الحالة التي تديرها React والحالة الخارجية، مثل البيانات من مكتبات الطرف الثالث، وواجهات برمجة تطبيقات المتصفح (browser APIs)، أو أطر عمل واجهة المستخدم الأخرى. دعنا نتعمق في فهم الغرض منه، وتطبيقه، وفوائده.

فهم الحاجة إلى useSyncExternalStore

تعمل إدارة الحالة المدمجة في React (مثل useState، وuseReducer، وContext API) بشكل جيد للغاية مع البيانات المرتبطة ارتباطًا وثيقًا بشجرة مكونات React. ومع ذلك، تحتاج العديد من التطبيقات إلى التكامل مع مصادر بيانات *خارج* سيطرة React. يمكن أن تشمل هذه المصادر الخارجية:

• مكتبات إدارة الحالة من الطرف الثالث: التكامل مع مكتبات مثل Zustand أو Jotai أو Valtio.
• واجهات برمجة تطبيقات المتصفح: الوصول إلى البيانات من localStorage أو IndexedDB أو Network Information API.
• البيانات التي يتم جلبها من الخوادم: على الرغم من أن مكتبات مثل React Query و SWR غالبًا ما تكون مفضلة، إلا أنك قد ترغب أحيانًا في التحكم المباشر.
• أطر عمل واجهة المستخدم الأخرى: في التطبيقات الهجينة حيث تتعايش React مع تقنيات واجهة المستخدم الأخرى.

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

كيف يعمل useSyncExternalStore

يقبل الخطاف useSyncExternalStore ثلاث وسائط (arguments):

1. subscribe: دالة تقبل دالة رد نداء (callback). سيتم استدعاء دالة رد النداء هذه كلما تغير المخزن الخارجي. يجب أن تعيد الدالة دالة أخرى، عند استدعائها، تقوم بإلغاء الاشتراك من المخزن الخارجي.
2. getSnapshot: دالة تعيد القيمة الحالية للمخزن الخارجي. تستخدم React هذه الدالة لقراءة قيمة المخزن أثناء التصيير.
3. getServerSnapshot (اختياري): دالة تعيد القيمة الأولية للمخزن الخارجي على الخادم. هذا ضروري فقط للتصيير من جانب الخادم (SSR). إذا لم يتم توفيرها، فستستخدم React دالة getSnapshot على الخادم.

يعيد الخطاف القيمة الحالية للمخزن الخارجي، التي تم الحصول عليها من دالة getSnapshot. تضمن React إعادة تصيير المكون كلما تغيرت القيمة التي تعيدها getSnapshot، كما يتم تحديدها بواسطة مقارنة Object.is.

مثال أساسي: المزامنة مع localStorage

دعنا ننشئ مثالًا بسيطًا يستخدم useSyncExternalStore لمزامنة قيمة مع localStorage.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

في هذا المثال:

• subscribe: تستمع لحدث storage على كائن window. يتم إطلاق هذا الحدث كلما تم تعديل localStorage بواسطة علامة تبويب أو نافذة أخرى.
• getSnapshot: تسترد قيمة myValue من localStorage.
• getServerSnapshot: تعيد قيمة افتراضية للتصيير من جانب الخادم. يمكن استرداد هذا من ملف تعريف ارتباط (cookie) إذا كان المستخدم قد قام بتعيين قيمة مسبقًا.
• MyComponent: يستخدم useSyncExternalStore للاشتراك في التغييرات في localStorage وعرض القيمة الحالية.

حالات الاستخدام المتقدمة والاعتبارات

1. التكامل مع مكتبات إدارة الحالة الخارجية

يبرز useSyncExternalStore عند دمج مكونات React مع مكتبات إدارة الحالة الخارجية. دعنا نلقي نظرة على مثال باستخدام Zustand:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

في هذا المثال، يتم استخدام useSyncExternalStore للاشتراك في التغييرات في مخزن Zustand. لاحظ كيف نمرر useStore.subscribe و useStore.getState مباشرة إلى الخطاف، مما يجعل التكامل سلسًا.

2. تحسين الأداء باستخدام التخزين المؤقت (Memoization)

نظرًا لأنه يتم استدعاء getSnapshot في كل عملية تصيير، فمن الأهمية بمكان التأكد من أنها ذات أداء عالٍ. تجنب الحسابات المكلفة داخل getSnapshot. إذا لزم الأمر، قم بتخزين نتيجة getSnapshot باستخدام useMemo أو تقنيات مشابهة.

ضع في اعتبارك هذا المثال (الذي قد يكون إشكاليًا):

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

في هذا المثال، تقوم getSnapshot (الدالة المضمنة التي تم تمريرها كوسيط ثانٍ إلى useSyncExternalStore) بعملية map مكلفة على مصفوفة كبيرة. سيتم تنفيذ هذه العملية في *كل* عملية تصيير، حتى لو لم تتغير البيانات الأساسية. لتحسين هذا، يمكننا تخزين النتيجة مؤقتًا:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

الآن، يتم تنفيذ عملية map فقط عندما تتغير externalStore.getState(). ملاحظة: ستحتاج في الواقع إلى مقارنة عميقة لـ `externalStore.getState()` أو استخدام استراتيجية مختلفة إذا كان المخزن يعدّل نفس الكائن. تم تبسيط المثال للتوضيح.

3. التعامل مع التصيير المتزامن (Concurrent Rendering)

الفائدة الأساسية لـ useSyncExternalStore هي توافقه مع ميزات التصيير المتزامن في React. يسمح التصيير المتزامن لـ React بإعداد إصدارات متعددة من واجهة المستخدم في وقت واحد. عندما يتغير المخزن الخارجي أثناء التصيير المتزامن، يضمن useSyncExternalStore أن React تستخدم دائمًا أحدث البيانات عند تطبيق التغييرات على DOM.

بدون useSyncExternalStore، قد يتم تصيير المكونات ببيانات قديمة، مما يؤدي إلى عدم تناسق بصري وسلوك غير متوقع. تم تصميم طريقة getSnapshot في useSyncExternalStore لتكون متزامنة وسريعة، مما يسمح لـ React بتحديد ما إذا كان المخزن الخارجي قد تغير أثناء التصيير بسرعة.

4. اعتبارات التصيير من جانب الخادم (SSR)

عند استخدام useSyncExternalStore مع التصيير من جانب الخادم، من الضروري توفير دالة getServerSnapshot. تُستخدم هذه الدالة لاسترداد القيمة الأولية للمخزن الخارجي على الخادم. بدونها، ستحاول React استخدام getSnapshot على الخادم، وهو ما قد لا يكون ممكنًا إذا كان المخزن الخارجي يعتمد على واجهات برمجة تطبيقات خاصة بالمتصفح (مثل localStorage).

يجب أن تعيد دالة getServerSnapshot قيمة افتراضية أو تسترد البيانات من مصدر من جانب الخادم (مثل ملفات تعريف الارتباط، قاعدة البيانات). هذا يضمن أن HTML الأولي الذي يتم تصييره على الخادم يحتوي على البيانات الصحيحة.

5. معالجة الأخطاء

تعد المعالجة القوية للأخطاء أمرًا بالغ الأهمية، خاصة عند التعامل مع مصادر البيانات الخارجية. قم بتغليف دالتي getSnapshot و getServerSnapshot في كتل try...catch لمعالجة الأخطاء المحتملة. قم بتسجيل الأخطاء بشكل مناسب وقدم قيمًا احتياطية لمنع تعطل التطبيق.

6. الخطافات المخصصة (Custom Hooks) لإعادة الاستخدام

لتعزيز إعادة استخدام الكود، قم بتغليف منطق useSyncExternalStore داخل خطاف مخصص. هذا يسهل مشاركة المنطق عبر مكونات متعددة.

على سبيل المثال، دعنا ننشئ خطافًا مخصصًا للوصول إلى مفتاح معين في localStorage:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

الآن، يمكنك بسهولة استخدام هذا الخطاف في أي مكون:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

أفضل الممارسات

• اجعل getSnapshot سريعة: تجنب الحسابات المكلفة داخل دالة getSnapshot. قم بتخزين النتيجة مؤقتًا إذا لزم الأمر.
• وفر getServerSnapshot لـ SSR: تأكد من أن HTML الأولي الذي يتم تصييره على الخادم يحتوي على البيانات الصحيحة.
• استخدم الخطافات المخصصة: قم بتغليف منطق useSyncExternalStore داخل خطافات مخصصة لتحسين قابلية إعادة الاستخدام والصيانة.
• تعامل مع الأخطاء بأمان: قم بتغليف getSnapshot و getServerSnapshot في كتل try...catch.
• قلل من الاشتراكات: اشترك فقط في أجزاء المخزن الخارجي التي يحتاجها المكون بالفعل. هذا يقلل من عمليات إعادة التصيير غير الضرورية.
• ضع في اعتبارك البدائل: قم بتقييم ما إذا كان useSyncExternalStore ضروريًا حقًا. للحالات البسيطة، قد تكون تقنيات إدارة الحالة الأخرى أكثر ملاءمة.

بدائل لـ useSyncExternalStore

في حين أن useSyncExternalStore أداة قوية، إلا أنها ليست دائمًا الحل الأفضل. ضع في اعتبارك هذه البدائل:

• إدارة الحالة المدمجة (useState، useReducer، Context API): إذا كانت البيانات مرتبطة ارتباطًا وثيقًا بشجرة مكونات React، فإن هذه الخيارات المدمجة غالبًا ما تكون كافية.
• React Query/SWR: لجلب البيانات، توفر هذه المكتبات إمكانات ممتازة للتخزين المؤقت، والإبطال، ومعالجة الأخطاء.
• Zustand/Jotai/Valtio: تقدم هذه المكتبات البسيطة لإدارة الحالة طريقة بسيطة وفعالة لإدارة حالة التطبيق.
• Redux/MobX: للتطبيقات المعقدة ذات الحالة العامة، قد يكون Redux أو MobX خيارًا أفضل (على الرغم من أنها تقدم المزيد من الكود المتكرر).

يعتمد الاختيار على المتطلبات المحددة لتطبيقك.

الخاتمة

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

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

للمزيد من الاستكشاف

• React Documentation for useSyncExternalStore
• أمثلة مع مكتبات إدارة الحالة المختلفة (Zustand, Jotai, Valtio)
• مقاييس الأداء التي تقارن useSyncExternalStore مع الأساليب الأخرى