useSyncExternalStore API और Parameters

useSyncExternalStore अधिकतम तीन तर्क लेता है: सदस्यता फ़ंक्शन, getSnapshot और वैकल्पिक getServerSnapshot। ये मिलकर React को बताते हैं कि बदलावों को कैसे सुना जाए और वर्तमान मान को कैसे पढ़ा जाए।

हर तर्क को समझना आवश्यक है, क्योंकि इनमें होने वाली छोटी गलतियाँ इस हुक का उपयोग करते समय समस्याओं का सबसे सामान्य स्रोत हैं।

सदस्यता फ़ंक्शन React से एक कॉलबैक प्राप्त करता है और उसे स्टोर के साथ पंजीकृत करना आवश्यक है, ताकि स्टोर में बदलाव होने पर कॉलबैक चले। इसे सदस्यता समाप्त करने वाला ऐसा फ़ंक्शन लौटाना आवश्यक है जिसे React सफ़ाई के समय बुलाता है।

React इसका उपयोग यह जानने के लिए करता है कि स्नैपशॉट को दोबारा कब पढ़ना है, इसलिए सदस्यता फ़ंक्शन का काम केवल बदलाव की सूचना का संबंध स्थापित करना और उसे हटाना है।

getSnapshot स्टोर का वर्तमान मान लौटाता है। React स्थिति पढ़ने के लिए इसे रेंडरिंग के दौरान बुलाता है और मान में बदलाव का पता लगाने के लिए सूचनाएँ मिलने के बाद फिर बुलाता है।

महत्वपूर्ण बात यह है कि जब अंतर्निहित डेटा नहीं बदला हो, तब इसे संदर्भ की दृष्टि से स्थिर परिणाम लौटाना चाहिए—हर बार नई वस्तु बनाने के बजाय वही संदर्भ लौटाना चाहिए।

वैकल्पिक getServerSnapshot सर्वर-साइड रेंडरिंग और हाइड्रेशन के शुरुआती चरण के दौरान उपयोग किया जाने वाला मान देता है। इसकी आवश्यकता इसलिए होती है, क्योंकि केवल ब्राउज़र में उपलब्ध getSnapshot ऐसे एपीआई पर निर्भर हो सकता है जो सर्वर पर मौजूद नहीं होते।

यह सर्वर को रेंडर करने के लिए ऐसा उपयुक्त मान देकर हाइड्रेशन में होने वाले असंगतियों को रोकता है, जो क्लाइंट द्वारा शुरुआत में बनाए जाने वाले मान से मेल खाता है।

यह हुक वर्तमान स्नैपशॉट मान लौटाता है, जिसका उपयोग आप अपने घटक में स्थिति के किसी अन्य हिस्से की तरह सीधे कर सकते हैं। स्टोर में बदलाव होने पर React दोबारा रेंडर करता है और हुक अद्यतन स्नैपशॉट लौटाता है।

घटक के दृष्टिकोण से यह प्रतिक्रियाशील स्थिति पढ़ने जैसा लगता है, भले ही सत्य का स्रोत पूरी तरह React के बाहर रहता हो।

getSnapshot को समकालिक रूप से चलना चाहिए और ऐसा मान लौटाना चाहिए जो पूरी तरह वर्तमान स्टोर स्थिति से निकला हो। इसे अतुल्यकालिक कार्य नहीं करना चाहिए और न ही समान अंतर्निहित डेटा के लिए अलग-अलग परिणाम देने चाहिए।

React इसे बार-बार बुलाकर परिणामों की तुलना करता है, इसलिए इसके भीतर होने वाली कोई भी अनिश्चितता या पार्श्व-प्रभाव गलत व्यवहार का कारण बन सकता है।

अपरिवर्तनीय स्थिति रखने वाले स्टोर में getSnapshot लिखना आसान होता है, क्योंकि वर्तमान स्थिति-वस्तु का संदर्भ केवल डेटा बदलने पर बदलता है। उस संदर्भ को लौटाने से तुलनाएँ अपने-आप स्थिर रहती हैं।

इसीलिए अपरिवर्तनीय अद्यतन के तरीके इस हुक के साथ इतने अच्छे से काम करते हैं: समान डेटा का अर्थ समान संदर्भ होता है और React अनावश्यक रूप से दोबारा रेंडर करने से बचता है।

एक सामान्य गलती यह है कि हर बार getSnapshot से बिल्कुल नई वस्तु या सारणी लौटाई जाए, जैसे उसके भीतर मानचित्रण या फ़िल्टरिंग करना। React हर बार नया संदर्भ देखकर समझता है कि मान बदल गया है।

इससे लगातार दोबारा रेंडरिंग या चेतावनियाँ शुरू हो जाती हैं। इसका समाधान है कि निकाले गए मान को कैश करें और स्रोत डेटा के वास्तव में बदलने तक वही संदर्भ लौटाएँ।

इस चक्र से बचने के लिए निकाले गए डेटा की गणना getSnapshot के बाहर करें या उसे स्मृति में रखें, ताकि फ़ंक्शन कैश किया हुआ संदर्भ लौटाए। कई लाइब्रेरी में उपयोग किया जाने वाला चयनकर्ता-शैली का तरीका ठीक इसी स्थिरता को सँभालने के लिए मौजूद है।

मुख्य नियम यह है कि अपरिवर्तित स्टोर डेटा के साथ getSnapshot को दो बार बुलाने पर बिल्कुल वही संदर्भ लौटना चाहिए।

व्यवहार में आप ऐसा सदस्यता फ़ंक्शन लिखते हैं जो एक श्रोता जोड़ता और हटाता है, ऐसा getSnapshot लिखते हैं जो स्थिर वर्तमान मान पढ़ता है और SSR के लिए ऐसा getServerSnapshot लिखते हैं जो सर्वर पर सुरक्षित मान लौटाता है।

इन तीनों के सही होने पर यह हुक आपके बाहरी स्टोर से सुसंगत और समवर्ती-सुरक्षित मान पढ़ता है, वह भी बहुत कम अतिरिक्त औपचारिकता के साथ।

यह हुक सदस्यता फ़ंक्शन, getSnapshot और वैकल्पिक रूप से getServerSnapshot लेता है। सदस्यता फ़ंक्शन श्रोता का संबंध स्थापित करके सदस्यता समाप्त करने वाला फ़ंक्शन लौटाता है; getSnapshot वर्तमान मान को समकालिक रूप से पढ़ता है और संदर्भ की दृष्टि से स्थिर होना चाहिए; getServerSnapshot SSR के लिए सुरक्षित मान देता है।

सामान्य समस्या यह है कि हर बार नई वस्तु लौटा दी जाती है, जिससे अनंत चक्र बन जाते हैं। निकाले गए मानों को कैश करें, ताकि अपरिवर्तित डेटा पर वही संदर्भ मिले।