रिएक्ट useSyncExternalStore: बाहरी स्टेट सिंक्रोनाइज़ेशन में महारत हासिल करना

useSyncExternalStore रिएक्ट 18 में पेश किया गया एक रिएक्ट हुक है जो आपको बाहरी डेटा स्रोतों से सब्सक्राइब करने और पढ़ने की अनुमति देता है, इस तरह से कि यह समवर्ती रेंडरिंग (concurrent rendering) के साथ संगत हो। यह हुक रिएक्ट के प्रबंधित स्टेट और बाहरी स्टेट, जैसे कि थर्ड-पार्टी लाइब्रेरी, ब्राउज़र API, या अन्य UI फ्रेमवर्क के डेटा के बीच की खाई को पाटता है। आइए इसके उद्देश्य, कार्यान्वयन और लाभों को गहराई से समझने की कोशिश करें।

useSyncExternalStore की आवश्यकता को समझना

रिएक्ट का अंतर्निहित स्टेट मैनेजमेंट (useState, useReducer, कॉन्टेक्स्ट API) उन डेटा के लिए असाधारण रूप से अच्छा काम करता है जो रिएक्ट कंपोनेंट ट्री के साथ कसकर जुड़े होते हैं। हालाँकि, कई एप्लिकेशन को रिएक्ट के नियंत्रण के *बाहर* डेटा स्रोतों के साथ एकीकृत करने की आवश्यकता होती है। इन बाहरी स्रोतों में शामिल हो सकते हैं:

• थर्ड-पार्टी स्टेट मैनेजमेंट लाइब्रेरीज़: Zustand, Jotai, या Valtio जैसी लाइब्रेरीज़ के साथ एकीकृत करना।
• ब्राउज़र APIs: localStorage, IndexedDB, या नेटवर्क सूचना API से डेटा एक्सेस करना।
• सर्वर से प्राप्त डेटा: जबकि रिएक्ट क्वेरी और SWR जैसी लाइब्रेरीज़ को अक्सर प्राथमिकता दी जाती है, कभी-कभी आप सीधे नियंत्रण चाहते हैं।
• अन्य UI फ्रेमवर्क: हाइब्रिड एप्लिकेशन में जहां रिएक्ट अन्य UI तकनीकों के साथ सह-अस्तित्व में है।

इन बाहरी स्रोतों से सीधे पढ़ना और लिखना, खासकर समवर्ती रेंडरिंग के साथ, समस्याओं का कारण बन सकता है। यदि बाहरी स्रोत बदल जाता है, जबकि रिएक्ट एक नई स्क्रीन तैयार कर रहा है, तो रिएक्ट पुराने डेटा के साथ एक कंपोनेंट को रेंडर कर सकता है। useSyncExternalStore रिएक्ट को बाहरी स्टेट के साथ सुरक्षित रूप से सिंक्रनाइज़ करने के लिए एक तंत्र प्रदान करके इस समस्या को हल करता है।

useSyncExternalStore कैसे काम करता है

useSyncExternalStore हुक तीन तर्क स्वीकार करता है:

1. subscribe: एक फ़ंक्शन जो एक कॉलबैक स्वीकार करता है। यह कॉलबैक तब लागू होगा जब भी बाहरी स्टोर बदलता है। फ़ंक्शन को एक ऐसा फ़ंक्शन लौटाना चाहिए जो, जब कॉल किया जाता है, तो बाहरी स्टोर से अनसब्सक्राइब हो जाता है।
2. getSnapshot: एक फ़ंक्शन जो बाहरी स्टोर का वर्तमान मान लौटाता है। रिएक्ट इस फ़ंक्शन का उपयोग रेंडरिंग के दौरान स्टोर के मान को पढ़ने के लिए करता है।
3. getServerSnapshot (वैकल्पिक): एक फ़ंक्शन जो सर्वर पर बाहरी स्टोर का प्रारंभिक मान लौटाता है। यह केवल सर्वर-साइड रेंडरिंग (SSR) के लिए आवश्यक है। यदि प्रदान नहीं किया गया है, तो रिएक्ट सर्वर पर getSnapshot का उपयोग करेगा।

हुक बाहरी स्टोर का वर्तमान मान लौटाता है, जो getSnapshot फ़ंक्शन से प्राप्त होता है। रिएक्ट यह सुनिश्चित करता है कि कंपोनेंट तब फिर से रेंडर हो जब getSnapshot द्वारा लौटाया गया मान बदलता है, जैसा कि Object.is तुलना द्वारा निर्धारित किया गया है।

मूल उदाहरण: localStorage के साथ सिंक्रोनाइज़ करना

आइए एक सरल उदाहरण बनाते हैं जो localStorage के साथ एक मान को सिंक्रोनाइज़ करने के लिए useSyncExternalStore का उपयोग करता है।

```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: window ऑब्जेक्ट पर storage इवेंट को सुनता है। यह इवेंट तब फायर होता है जब localStorage को किसी अन्य टैब या विंडो द्वारा संशोधित किया जाता है।
• getSnapshot: localStorage से myValue का मान प्राप्त करता है।
• getServerSnapshot: सर्वर-साइड रेंडरिंग के लिए एक डिफ़ॉल्ट मान लौटाता है। इसे कुकी से पुनर्प्राप्त किया जा सकता है यदि उपयोगकर्ता ने पहले कोई मान सेट किया हो।
• MyComponent: localStorage में परिवर्तनों की सदस्यता लेने और वर्तमान मान प्रदर्शित करने के लिए useSyncExternalStore का उपयोग करता है।

उन्नत उपयोग के मामले और विचार

1. थर्ड-पार्टी स्टेट मैनेजमेंट लाइब्रेरीज़ के साथ एकीकरण

useSyncExternalStore तब चमकता है जब रिएक्ट कंपोनेंट्स को बाहरी स्टेट मैनेजमेंट लाइब्रेरीज़ के साथ एकीकृत किया जाता है। आइए 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. मेमोइज़ेशन के साथ प्रदर्शन का अनुकूलन

चूंकि getSnapshot को हर रेंडर पर कॉल किया जाता है, इसलिए यह सुनिश्चित करना महत्वपूर्ण है कि यह प्रदर्शनशील हो। getSnapshot के भीतर महंगी गणनाओं से बचें। यदि आवश्यक हो, तो useMemo या इसी तरह की तकनीकों का उपयोग करके getSnapshot के परिणाम को मेमोइज़ करें।

इस (संभावित रूप से समस्याग्रस्त) उदाहरण पर विचार करें:

```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. समवर्ती रेंडरिंग को संभालना

useSyncExternalStore का प्राथमिक लाभ रिएक्ट की समवर्ती रेंडरिंग सुविधाओं के साथ इसकी संगतता है। समवर्ती रेंडरिंग रिएक्ट को एक साथ UI के कई संस्करण तैयार करने की अनुमति देती है। जब समवर्ती रेंडर के दौरान बाहरी स्टोर बदलता है, तो useSyncExternalStore यह सुनिश्चित करता है कि DOM में परिवर्तनों को लागू करते समय रिएक्ट हमेशा सबसे अद्यतित डेटा का उपयोग करता है।

useSyncExternalStore के बिना, कंपोनेंट्स पुराने डेटा के साथ रेंडर हो सकते हैं, जिससे दृश्य असंगतताएं और अप्रत्याशित व्यवहार हो सकता है। useSyncExternalStore की getSnapshot विधि को सिंक्रोनस और तेज़ होने के लिए डिज़ाइन किया गया है, जिससे रिएक्ट को जल्दी से यह निर्धारित करने की अनुमति मिलती है कि रेंडरिंग के दौरान बाहरी स्टोर बदल गया है या नहीं।

4. सर्वर-साइड रेंडरिंग (SSR) विचार

सर्वर-साइड रेंडरिंग के साथ useSyncExternalStore का उपयोग करते समय, getServerSnapshot फ़ंक्शन प्रदान करना आवश्यक है। इस फ़ंक्शन का उपयोग सर्वर पर बाहरी स्टोर के प्रारंभिक मान को पुनः प्राप्त करने के लिए किया जाता है। इसके बिना, रिएक्ट सर्वर पर getSnapshot का उपयोग करने का प्रयास करेगा, जो संभव नहीं हो सकता है यदि बाहरी स्टोर ब्राउज़र-विशिष्ट API (उदाहरण के लिए, localStorage) पर निर्भर करता है।

getServerSnapshot फ़ंक्शन को एक डिफ़ॉल्ट मान लौटाना चाहिए या सर्वर-साइड स्रोत (जैसे, कुकीज़, डेटाबेस) से डेटा पुनर्प्राप्त करना चाहिए। यह सुनिश्चित करता है कि सर्वर पर रेंडर किए गए प्रारंभिक HTML में सही डेटा हो।

5. त्रुटि प्रबंधन (Error Handling)

मजबूत त्रुटि प्रबंधन महत्वपूर्ण है, खासकर जब बाहरी डेटा स्रोतों से निपटते हैं। संभावित त्रुटियों को संभालने के लिए getSnapshot और getServerSnapshot फ़ंक्शंस को try...catch ब्लॉक में लपेटें। त्रुटियों को उचित रूप से लॉग करें और एप्लिकेशन को क्रैश होने से बचाने के लिए फ़ॉलबैक मान प्रदान करें।

6. पुन: प्रयोज्यता के लिए कस्टम हुक

कोड की पुन: प्रयोज्यता को बढ़ावा देने के लिए, 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 ( ); } ```

सर्वोत्तम प्रथाएं (Best Practices)

• getSnapshot को तेज़ रखें: getSnapshot फ़ंक्शन के भीतर महंगी गणनाओं से बचें। यदि आवश्यक हो तो परिणाम को मेमोइज़ करें।
• SSR के लिए getServerSnapshot प्रदान करें: सुनिश्चित करें कि सर्वर पर रेंडर किए गए प्रारंभिक HTML में सही डेटा है।
• कस्टम हुक का उपयोग करें: बेहतर पुन: प्रयोज्यता और रखरखाव के लिए useSyncExternalStore तर्क को कस्टम हुक के भीतर समाहित करें।
• त्रुटियों को शालीनता से संभालें: getSnapshot और getServerSnapshot को try...catch ब्लॉक में लपेटें।
• सदस्यताएँ कम से कम करें: केवल बाहरी स्टोर के उन हिस्सों की सदस्यता लें जिनकी कंपोनेंट को वास्तव में आवश्यकता है। यह अनावश्यक री-रेंडर को कम करता है।
• विकल्पों पर विचार करें: मूल्यांकन करें कि क्या useSyncExternalStore वास्तव में आवश्यक है। सरल मामलों के लिए, अन्य स्टेट मैनेजमेंट तकनीकें अधिक उपयुक्त हो सकती हैं।

useSyncExternalStore के विकल्प

हालांकि useSyncExternalStore एक शक्तिशाली उपकरण है, यह हमेशा सबसे अच्छा समाधान नहीं होता है। इन विकल्पों पर विचार करें:

• अंतर्निहित स्टेट मैनेजमेंट (useState, useReducer, कॉन्टेक्स्ट API): यदि डेटा रिएक्ट कंपोनेंट ट्री के साथ कसकर जुड़ा हुआ है, तो ये अंतर्निहित विकल्प अक्सर पर्याप्त होते हैं।
• रिएक्ट क्वेरी/SWR: डेटा फ़ेचिंग के लिए, ये लाइब्रेरीज़ उत्कृष्ट कैशिंग, अमान्यकरण और त्रुटि प्रबंधन क्षमताएं प्रदान करती हैं।
• Zustand/Jotai/Valtio: ये न्यूनतम स्टेट मैनेजमेंट लाइब्रेरीज़ एप्लिकेशन स्टेट को प्रबंधित करने का एक सरल और कुशल तरीका प्रदान करती हैं।
• Redux/MobX: वैश्विक स्टेट वाले जटिल एप्लिकेशन के लिए, Redux या MobX एक बेहतर विकल्प हो सकता है (हालांकि वे अधिक बॉयलरप्लेट पेश करते हैं)।

चुनाव आपके एप्लिकेशन की विशिष्ट आवश्यकताओं पर निर्भर करता है।

निष्कर्ष

useSyncExternalStore रिएक्ट के टूलकिट में एक मूल्यवान जोड़ है, जो समवर्ती रेंडरिंग के साथ संगतता बनाए रखते हुए बाहरी स्टेट स्रोतों के साथ निर्बाध एकीकरण को सक्षम बनाता है। इसके उद्देश्य, कार्यान्वयन और उन्नत उपयोग के मामलों को समझकर, आप विभिन्न स्रोतों से डेटा के साथ प्रभावी ढंग से बातचीत करने वाले मजबूत और प्रदर्शनशील रिएक्ट एप्लिकेशन बनाने के लिए इस हुक का लाभ उठा सकते हैं।

प्रदर्शन को प्राथमिकता देना, त्रुटियों को शालीनता से संभालना और useSyncExternalStore का उपयोग करने से पहले वैकल्पिक समाधानों पर विचार करना याद रखें। सावधानीपूर्वक योजना और कार्यान्वयन के साथ, यह हुक आपके रिएक्ट एप्लिकेशन के लचीलेपन और शक्ति को महत्वपूर्ण रूप से बढ़ा सकता है।

आगे की खोज

• useSyncExternalStore के लिए रिएक्ट दस्तावेज़ीकरण
• विभिन्न स्टेट मैनेजमेंट लाइब्रेरीज़ (Zustand, Jotai, Valtio) के साथ उदाहरण
• useSyncExternalStore की अन्य दृष्टिकोणों के साथ तुलना करने वाले प्रदर्शन बेंचमार्क