External Store Subscriptions की समस्या

बाहरी स्टोर स्थिति का ऐसा कोई भी स्रोत होता है जो रिएक्ट ट्री के बाहर रहता है, जैसे रिडक्स स्टोर, matchMedia जैसा ब्राउज़र एपीआई या अपनी सदस्यता-विधि वाली साधारण मॉड्यूल-स्तरीय वस्तु।

रिएक्ट इस स्थिति का स्वामी नहीं होता, इसलिए उसे परिवर्तनों की सदस्यता लेनी पड़ती है और स्नैपशॉट पढ़ने पड़ते हैं, ताकि घटक स्टोर में वर्तमान में मौजूद स्थिति के साथ समन्वय में रहें।

एक सामान्य तरीका यह है कि स्टोर का मान useState में पढ़ लिया जाए, फिर useEffect से सदस्यता लेकर स्टोर बदलने पर हर बार setState को कॉल किया जाए। ऊपर से देखने पर यह घटक को नवीनतम बनाए रखने वाला तरीका लगता है।

यह सरल समकालिक रेंडरिंग के लिए काम करता है, लेकिन इसमें एक सूक्ष्म दोष है जो तब दिखाई देता है जब रिएक्ट समवर्ती रूप से रेंडर करता है और काम को बीच में रोक या फिर से शुरू कर सकता है।

विखंडन तब होता है जब एक ही रेंडर चक्र के दौरान उपयोगकर्ता इंटरफ़ेस के अलग-अलग हिस्से उसी स्टोर के अलग-अलग मान दिखाते हैं। समवर्ती रेंडरिंग काम को रोककर फिर शुरू कर सकती है और इस बीच स्टोर बदल सकता है।

नतीजा एक असंगत स्क्रीन होती है, जहाँ एक घटक पुराना मान दिखाता है और दूसरा नया। समवर्ती सुविधाओं से पहले ऐसी असंगति प्रभावी रूप से असंभव थी।

कल्पना कीजिए कि रिएक्ट के समवर्ती रूप से रेंडर करने के दौरान कई घटक थीम स्टोर पढ़ रहे हैं। यदि उपयोगकर्ता बीच में गहरी थीम चालू कर दे, तो टॉगल से पहले रेंडर किए गए घटक उजली थीम दिखाएँगे और उसके बाद वाले गहरी थीम दिखाएँगे।

आपको एक फ़्रेम के लिए आधी उजली और आधी गहरी स्क्रीन दिखाई देगी, क्योंकि रिएक्ट द्वारा उसे अविभाज्य मानकर संभाले गए रेंडर के दौरान स्टोर का मान बदल गया।

प्रभाव रेंडर के कमिट होने के बाद चलते हैं, इसलिए useEffect पर आधारित सदस्यता यह सुनिश्चित नहीं कर सकती कि रेंडर के दौरान पढ़ा गया मान कमिट के समय स्टोर के मान से मेल खाता हो। असंगत चित्रण को रोकने के लिए सदस्यता बहुत देर से सक्रिय होती है।

जब तक प्रभाव फिर से सदस्यता लेकर स्थिति अद्यतन करता है, तब तक असंगत फ़्रेम उपयोगकर्ता को दिखाया जा चुका हो सकता है।

useMutableSource नामक एक पुरानी प्रयोगात्मक एपीआई ने समवर्ती-सुरक्षित बाहरी पठन की समस्या हल करने का प्रयास किया था, लेकिन इसका एपीआई सही ढंग से उपयोग करना कठिन साबित हुआ और इसे कभी स्थिर रूप में जारी नहीं किया गया।

रिएक्ट टीम ने इसकी जगह एक सरल और अधिक सहज मूल सुविधा दी, जो कठिन जटिलताओं के बिना वही संगतता-गारंटी देती है।

useSyncExternalStore समवर्ती रूप से सुरक्षित तरीके से बाहरी स्टोर की सदस्यता लेने के लिए आधिकारिक हुक है। यह रिएक्ट के साथ समन्वय करता है, ताकि एक रेंडर के दौरान पठन सुसंगत रहें और घटक कभी अलग-अलग मान न दिखाएँ।

यह उन पुस्तकालय-लेखकों के लिए अनुशंसित मूल सुविधा बन गया जिन्हें समवर्ती रेंडरिंग के अंतर्गत बाहरी स्थिति को विश्वसनीय ढंग से रिएक्ट से जोड़ना होता है।

बाहरी स्टोर की सदस्यता लेने वाले स्थिति-पुस्तकालय सीधे प्रभावित हुए, जिनमें रिडक्स, मोबएक्स और वाल्टियो शामिल हैं। समवर्ती सुविधाएँ जारी होने के बाद सुरक्षित बने रहने के लिए हर पुस्तकालय को इस नई मूल सुविधा को अपनाना पड़ा।

इसी कारण उनके रिएक्ट बाइंडिंग पुराने useState और useEffect पैटर्न पर निर्भर रहने के बजाय अंदर से useSyncExternalStore को कॉल करने के लिए अद्यतन किए गए।

यह हुक सुनिश्चित करता है कि रेंडरिंग के दौरान स्टोर को पढ़ने वाला हर घटक एक ही स्नैपशॉट देखे, और यदि स्टोर इस तरह बदलता है कि अन्यथा टियरिंग हो सकती है, तो यह तुरंत दोबारा रेंडर कराता है।

सुसंगत स्नैपशॉट और समवर्ती सुरक्षा का यह संयोजन, हाथ से बनाई गई सदस्यता की तुलना में इस हुक का मुख्य लाभ है।

useSyncExternalStore का उपयोग करने पर, React के रेंडरिंग मॉडल के विकसित होने के साथ आपकी सदस्यताएँ सही बनी रहती हैं। आप इन गारंटियों को स्वयं अपूर्ण रूप से दोबारा लागू करने के बजाय फ़्रेमवर्क की गारंटियों का लाभ लेते हैं।

इससे यह किसी भी बाहरी सत्य-स्रोत को React घटकों से जोड़ने का टिकाऊ और अनुशंसित तरीका बन जाता है।

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

useSyncExternalStore, अब छोड़े जा चुके useMutableSource का स्थान लेता है और समवर्ती सुरक्षा के साथ एक सुसंगत स्नैपशॉट देता है। Redux, MobX और Valtio जैसी लाइब्रेरी ने स्टोर की सदस्यताओं के लिए इसे भविष्य के लिए टिकाऊ मूल साधन के रूप में अपनाया है।