Browser APIs की सदस्यता लेना

ब्राउज़र की मीडिया क्वेरी एक आदर्श बाहरी स्टोर होती है। आप डार्क मोड या किसी सीमा-बिंदु के लिए matchMedia क्वेरी की सदस्यता ले सकते हैं और मिलान की स्थिति बदलने पर दोबारा रेंडर कर सकते हैं।

सदस्यता फ़ंक्शन MediaQueryList में बदलाव का श्रोता जोड़ता है और getSnapshot उसका वर्तमान मिलान-बूलियन मान लौटाता है, जिससे आपको प्रतिक्रियाशील रूप से अनुकूलनशील स्थितियों तक पहुँच मिलती है।

इस तर्क को useMediaQuery हुक में समेटने से घटक एक ही कॉल में पूछ सकते हैं कि कोई क्वेरी मेल खाती है या नहीं। यह हुक दी गई क्वेरी स्ट्रिंग के आधार पर स्थिर सदस्यता फ़ंक्शन और getSnapshot तैयार करता है।

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

ब्राउज़र ऑनलाइन और ऑफलाइन घटनाओं के साथ navigator.onLine भी उपलब्ध कराता है। इन घटनाओं की सदस्यता लेकर और इस गुण को पढ़कर आप React के भीतर कनेक्टिविटी की वर्तमान स्थिति पा सकते हैं।

getSnapshot navigator.onLine लौटाता है और सदस्यता फ़ंक्शन ऑनलाइन तथा ऑफलाइन घटनाओं के लिए श्रोते जोड़ता है, ताकि कनेक्टिविटी बदलने पर घटक अद्यतन हो जाए।

इसे useOnlineStatus हुक में समेटने से कोई भी घटक नेटवर्क बंद होने पर ऑफलाइन सूचना दिखा सकता है या कार्रवाइयों को निष्क्रिय कर सकता है। React के आधिकारिक दस्तावेज़ हुक को समझाने के लिए इसी उदाहरण का उपयोग करते हैं।

यह एक छोटा लेकिन उपयोगी उदाहरण है, जिसमें ब्राउज़र का बाहरी संकेत प्रतिक्रियाशील स्थिति के एक हिस्से में आसानी से बदल जाता है।

आप popstate घटना को सुनकर और getSnapshot में window.location पढ़कर नेविगेशन के बदलावों की सदस्यता ले सकते हैं। यह History एपीआई पर आधारित सरल कस्टम राउटरों का आधार है।

क्योंकि pushState popstate घटना नहीं भेजता, इसलिए प्रोग्राम के माध्यम से किए गए नेविगेशन पर भी स्नैपशॉट अद्यतन करने के लिए कस्टम राउटर अक्सर अपनी घटना भेजते हैं।

जब localStorage में बदलाव होता है, तब storage घटना दूसरे टैबों में चलती है, जिससे यह ऐसा बाहरी स्टोर बन जाता है जिसकी सदस्यता ली जा सकती है। getSnapshot वर्तमान मान पढ़ता है और सदस्यता फ़ंक्शन storage घटनाओं को सुनता है।

इससे टैबों के बीच समन्वय संभव होता है: एक टैब में मान अद्यतन करने पर दूसरे टैब के घटक प्रतिक्रियाशील रूप से अद्यतन हो जाते हैं।

डिवाइस-ओरिएंटेशन घटना किसी उपकरण के भौतिक झुकाव की सूचना देती है। इसकी सदस्यता लेकर और getSnapshot में नवीनतम कोण पढ़कर गति के डेटा को प्रतिक्रियाशील स्थिति में बदला जा सकता है।

यह लंबन प्रभावों या ऐसे परस्पर-सक्रिय दृश्यांकनों के लिए उपयोगी है, जो फ़ोन को पकड़ने के तरीके के अनुसार प्रतिक्रिया देते हैं।

IntersectionObserver आपको बताता है कि कोई तत्व दृश्य-क्षेत्र में कब प्रवेश करता है या उससे बाहर जाता है। आप इसे इस तरह समेट सकते हैं कि सदस्यता फ़ंक्शन प्रेक्षक बनाए और getSnapshot नवीनतम isIntersecting मान लौटाए।

इससे आपको चित्रों को आवश्यकता पड़ने पर लोड करने, एनिमेशन शुरू करने या अनंत स्क्रॉल के संकेतक लागू करने के लिए प्रतिक्रियाशील isVisible ध्वज मिलता है।

ResizeObserver तत्व के आकार में होने वाले बदलावों की सूचना देता है। इसे समेटने पर सदस्यता फ़ंक्शन किसी तत्व का निरीक्षण कर सकता है और getSnapshot उसके वर्तमान आयाम लौटा सकता है, जिससे घटक लेआउट में होने वाले बदलावों पर सटीक प्रतिक्रिया देते हैं।

जब आपकी रुचि पूरे दृश्य-क्षेत्र के बजाय किसी विशेष तत्व में हो, तब यह window resize को सुनने की तुलना में अधिक प्रभावी और सटीक होता है।

आप आकार-बदलाव घटना को इस हुक के साथ मिलाकर ऐसा useWindowSize बना सकते हैं जो वर्तमान चौड़ाई और ऊँचाई लौटाए। सदस्यता फ़ंक्शन आकार-बदलाव का श्रोता जोड़ता है और getSnapshot विंडो के आयाम पढ़ता है।

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

कई ब्राउज़र एपीआई ऐसे बाहरी स्टोर हैं जिन्हें आप useSyncExternalStore के माध्यम से जोड़ सकते हैं: सीमा-बिंदुओं के लिए matchMedia, कनेक्टिविटी के लिए navigator.onLine, नेविगेशन और टैबों के बीच समन्वय के लिए लोकेशन और स्टोरेज, तथा ओरिएंटेशन, इंटरसेक्शन और आकार-बदलाव प्रेक्षक।

हर एक का ढाँचा समान होता है: ऐसा सदस्यता फ़ंक्शन जो श्रोतों को जोड़ता और हटाता है, और एक स्थिर getSnapshot। इन्हें useMediaQuery, useOnlineStatus और useWindowSize जैसे हुकों में संयोजित करें।