React useSyncExternalStore: बाह्य स्टेट सिंक्रोनाइझेशनमध्ये प्रभुत्व मिळवणे

useSyncExternalStore हा React 18 मध्ये सादर केलेला एक React हुक आहे जो तुम्हाला बाह्य डेटा स्रोतांसाठी सबस्क्राइब करण्याची आणि त्यातून वाचण्याची परवानगी देतो, अशा प्रकारे जे कॉन्करंट रेंडरिंगशी सुसंगत आहे. हा हुक React च्या व्यवस्थापित स्टेट आणि बाह्य स्टेट, जसे की तृतीय-पक्ष लायब्ररी, ब्राउझर API किंवा इतर UI फ्रेमवर्कमधील डेटा यांच्यातील अंतर कमी करतो. चला त्याचा उद्देश, अंमलबजावणी आणि फायदे सखोलपणे समजून घेऊया.

useSyncExternalStore ची गरज समजून घेणे

React चे अंगभूत स्टेट मॅनेजमेंट (useState, useReducer, Context API) React कंपोनेंट ट्रीशी घट्टपणे जोडलेल्या डेटासाठी अपवादात्मकरित्या चांगले कार्य करते. तथापि, अनेक ॲप्लिकेशन्सना React च्या नियंत्रणाबाहेरील डेटा स्रोतांसह एकत्रित करण्याची आवश्यकता असते. या बाह्य स्रोतांमध्ये हे समाविष्ट असू शकते:

• तृतीय-पक्ष स्टेट मॅनेजमेंट लायब्ररीज: Zustand, Jotai, किंवा Valtio सारख्या लायब्ररींसह एकत्रीकरण.
• ब्राउझर APIs: localStorage, IndexedDB, किंवा नेटवर्क माहिती API मधून डेटा मिळवणे.
• सर्व्हरवरून मिळवलेला डेटा: React Query आणि SWR सारख्या लायब्ररींना अनेकदा प्राधान्य दिले जात असले तरी, काहीवेळा तुम्हाला थेट नियंत्रणाची इच्छा असू शकते.
• इतर UI फ्रेमवर्क्स: हायब्रिड ॲप्लिकेशन्समध्ये जेथे React इतर UI तंत्रज्ञानासह अस्तित्वात आहे.

React कंपोनेंटमध्ये या बाह्य स्रोतांमधून थेट वाचणे आणि लिहिणे समस्या निर्माण करू शकते, विशेषतः कॉन्करंट रेंडरिंगमध्ये. React नवीन स्क्रीन तयार करत असताना बाह्य स्रोत बदलल्यास React जुन्या डेटासह कंपोनेंट रेंडर करू शकते. useSyncExternalStore बाह्य स्टेटसोबत सुरक्षितपणे सिंक्रोनाइझ करण्यासाठी React ला एक यंत्रणा प्रदान करून ही समस्या सोडवते.

useSyncExternalStore कसे काम करते

useSyncExternalStore हुक तीन वितर्क (arguments) स्वीकारतो:

1. subscribe: एक फंक्शन जे कॉलबॅक स्वीकारते. जेव्हाही एक्सटर्नल स्टोअरमध्ये बदल होईल तेव्हा हा कॉलबॅक लागू केला जाईल. फंक्शनने एक फंक्शन परत केले पाहिजे जे, कॉल केल्यावर, एक्सटर्नल स्टोअरमधून अनसबस्क्राइब करते.
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: window ऑब्जेक्टवरील storage इव्हेंटसाठी ऐकतो. हा इव्हेंट जेव्हा localStorage दुसऱ्या टॅब किंवा विंडोद्वारे सुधारित केला जातो तेव्हा फायर होतो.
• getSnapshot: localStorage मधून myValue चे मूल्य प्राप्त करतो.
• getServerSnapshot: सर्व्हर-साइड रेंडरिंगसाठी डिफॉल्ट मूल्य परत करतो. जर वापरकर्त्याने आधीच मूल्य सेट केले असेल तर हे कुकीमधून मिळवले जाऊ शकते.
• MyComponent: localStorage मधील बदलांसाठी सबस्क्राइब करण्यासाठी आणि वर्तमान मूल्य प्रदर्शित करण्यासाठी useSyncExternalStore वापरतो.

प्रगत वापर प्रकरणे आणि विचार

१. तृतीय-पक्ष स्टेट मॅनेजमेंट लायब्ररींसह एकत्रीकरण

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 थेट हुकला कसे पास करतो, ज्यामुळे एकत्रीकरण अखंड होते.

२. मेमोइझेशनसह कार्यप्रदर्शन ऑप्टिमाइझ करणे

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 (दुसरा वितर्क म्हणून पास केलेले इनलाइन फंक्शन) मोठ्या ॲरेवर एक महागडी 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() ची डीप तुलना करावी लागेल किंवा वेगळी रणनीती वापरावी लागेल. हे उदाहरण प्रदर्शनासाठी सोपे केले आहे.

३. कॉन्करंट रेंडरिंग हाताळणे

useSyncExternalStore चा प्राथमिक फायदा म्हणजे React च्या कॉन्करंट रेंडरिंग वैशिष्ट्यांसह त्याची सुसंगतता. कॉन्करंट रेंडरिंग React ला एकाच वेळी UI च्या अनेक आवृत्त्या तयार करण्याची परवानगी देते. जेव्हा कॉन्करंट रेंडर दरम्यान बाह्य स्टोअर बदलते, तेव्हा useSyncExternalStore हे सुनिश्चित करते की DOM मध्ये बदल लागू करताना React नेहमीच सर्वात अद्ययावत डेटा वापरते.

useSyncExternalStore शिवाय, कंपोनेंट्स जुन्या डेटासह रेंडर होऊ शकतात, ज्यामुळे व्हिज्युअल विसंगती आणि अनपेक्षित वर्तन होऊ शकते. useSyncExternalStore ची getSnapshot पद्धत सिंक्रोनस आणि जलद होण्यासाठी डिझाइन केलेली आहे, ज्यामुळे React ला रेंडरिंग दरम्यान बाह्य स्टोअर बदलले आहे की नाही हे त्वरीत निर्धारित करता येते.

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

सर्व्हर-साइड रेंडरिंगसह useSyncExternalStore वापरताना, getServerSnapshot फंक्शन प्रदान करणे आवश्यक आहे. हे फंक्शन सर्व्हरवर बाह्य स्टोअरचे प्रारंभिक मूल्य मिळवण्यासाठी वापरले जाते. त्याशिवाय, React सर्व्हरवर getSnapshot वापरण्याचा प्रयत्न करेल, जे शक्य होणार नाही जर बाह्य स्टोअर ब्राउझर-विशिष्ट API (उदा. localStorage) वर अवलंबून असेल.

getServerSnapshot फंक्शनने डिफॉल्ट मूल्य परत केले पाहिजे किंवा सर्व्हर-साइड स्त्रोतावरून (उदा. कुकीज, डेटाबेस) डेटा मिळवला पाहिजे. हे सुनिश्चित करते की सर्व्हरवर रेंडर केलेल्या प्रारंभिक HTML मध्ये योग्य डेटा आहे.

५. त्रुटी हाताळणी

मजबूत त्रुटी हाताळणी महत्त्वपूर्ण आहे, विशेषतः बाह्य डेटा स्रोतांशी व्यवहार करताना. संभाव्य त्रुटी हाताळण्यासाठी getSnapshot आणि getServerSnapshot फंक्शन्सना try...catch ब्लॉक्समध्ये गुंडाळा. त्रुटी योग्यरित्या लॉग करा आणि ॲप्लिकेशन क्रॅश होण्यापासून रोखण्यासाठी फॉलबॅक मूल्ये प्रदान करा.

६. पुनर्वापरासाठी कस्टम हुक्स

कोड पुनर्वापराला प्रोत्साहन देण्यासाठी, 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 फंक्शनमध्ये महागड्या गणने टाळा. आवश्यक असल्यास परिणामाचे मेमोइझेशन करा.
• SSR साठी getServerSnapshot प्रदान करा: सर्व्हरवर रेंडर केलेल्या प्रारंभिक 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 ॲप्लिकेशन्सची लवचिकता आणि शक्ती लक्षणीयरीत्या वाढवू शकतो.

अधिक अन्वेषण

• useSyncExternalStore साठी React डॉक्युमेंटेशन
• विविध स्टेट मॅनेजमेंट लायब्ररींसह उदाहरणे (Zustand, Jotai, Valtio)
• इतर दृष्टिकोनांसह useSyncExternalStore ची तुलना करणारे कार्यप्रदर्शन बेंचमार्क