रिएक्ट 18 हुक का उपयोग करना सीखें

मार्च 2022 में, रिएक्ट टीम ने रिएक्ट 18 की आधिकारिक रिलीज़ की घोषणा की। यह रिलीज़ "समवर्ती रेंडरिंग" की अवधारणा के आधार पर, प्रदर्शन में सुधार के लिए तैयार कई नई सुविधाओं के साथ आई है। समवर्ती प्रतिपादन के पीछे विचार डोम को बाधित करने की प्रक्रिया को बाधित करना है।

नई सुविधाओं में से पांच हुक हैं: यूज़आईड, यूज़ ट्रांज़िशन, यूज़डेरडवैल्यू, यूज़सिंकएक्सटर्नलस्टोर, और यूज़इन्सर्शनइफ़ेक्ट।

प्रतिक्रिया उपयोग संक्रमण हुक

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

खोज पृष्ठ घटक

यह सरल प्रोग्राम एक खोज इंजन का अनुकरण करता है जो दो राज्यों को अद्यतन करता है—एक इनपुट फ़ील्ड और कुछ खोज परिणाम।

आयात {यूजस्टेट} से "प्रतिक्रिया";
समारोहखोज पृष्ठ() {
 कॉन्स्ट [इनपुट, सेटइनपुट] = यूज़स्टेट (

instagram viewer

"")
स्थिरांक [सूची, सेटलिस्ट] = यूज़स्टेट ([]);
स्थिरांक सूची आकार = 30000
समारोहसंभाल बदलें(इ) {
सेटइनपुट(इ।लक्ष्य।मूल्य);
स्थिरांक सूची आइटम = [];
के लिये (होने देना मैं = 0; मैं सूची आइटम।धकेलना(इ।लक्ष्य।मूल्य);
 }
सेटलिस्ट (सूची आइटम);
 }
वापसी (
<डिव>
<लेबल>वेब खोज: </label>
<इनपुट प्रकार ="मूलपाठ" मूल्य = {इनपुट} ऑन चेंज = {हैंडल चेंज} />
{सूचीमैप ((आइटम, इंडेक्स) => {
 वापसी <डिव कुंजी = {इंडेक्स}>{वस्तु}</div>
 })}
</div>
 );
}
निर्यात करनाचूक खोज पृष्ठ;

अपडेट किया गया ऐप घटक

आयात खोज पृष्ठ से "./घटक/खोज पृष्ठ";
समारोहअनुप्रयोग() {
वापसी (
<डिव>
< खोज पृष्ठ/>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

उपरोक्त कोड एक इनपुट फ़ील्ड के साथ एक रिएक्ट एप्लिकेशन को प्रस्तुत करता है:

जैसे ही आप फ़ील्ड में अक्षर टाइप करना शुरू करते हैं, टाइप किए गए टेक्स्ट की 30,000 प्रतियां नीचे दिखाई देंगी:

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

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

एप्लिकेशन में उपयोग ट्रांज़िशन हुक डालने से आप एक राज्य अपडेट को दूसरे पर प्राथमिकता दे सकते हैं।

ट्रांजिशन हुक का उपयोग करना

आयात {यूजस्टेट, यूज ट्रांजिशन} से "प्रतिक्रिया";
समारोहखोज पृष्ठ() {
स्थिरांक [लंबित है, प्रारंभ ट्रांज़िशन] = उपयोग ट्रांज़िशन ();
 कॉन्स्ट [इनपुट, सेटइनपुट] = यूज़स्टेट ("")
स्थिरांक [सूची, सेटलिस्ट] = यूज़स्टेट ([]);
स्थिरांक सूची आकार = 30000
समारोहसंभाल बदलें(इ) {
सेटइनपुट(इ।लक्ष्य।मूल्य);
 स्टार्ट ट्रांज़िशन (() => {
स्थिरांक सूची आइटम = [];
के लिये (होने देना मैं = 0; मैं सूची आइटम।धकेलना(इ।लक्ष्य।मूल्य);
 }
सेटलिस्ट (सूची आइटम);
 });
 }
वापसी (
<डिव>
<लेबल>वेब खोज: </label>
<इनपुट प्रकार ="मूलपाठ" मूल्य = {इनपुट} ऑन चेंज = {हैंडल चेंज} />
{लंबित है? "...परिणाम लोड हो रहे हैं": list.map((आइटम, इंडेक्स) => {
 वापसी <डिव कुंजी = {इंडेक्स}>{वस्तु}</div>
 })}
</div>
 );
}
निर्यात करनाचूक खोज पृष्ठ;

अपना अपडेट कर रहा है खोज पृष्ठ उपरोक्त कोड वाला घटक "खोज परिणाम क्षेत्र" पर इनपुट फ़ील्ड को प्राथमिकता देगा। इस साधारण परिवर्तन का स्पष्ट प्रभाव पड़ता है: आपको वह टेक्स्ट दिखना शुरू हो जाना चाहिए जिसे आप इनपुट फ़ील्ड में तुरंत टाइप करते हैं। केवल "खोज परिणाम क्षेत्र" में अभी भी थोड़ा विलंब होगा। यह के कारण है प्रारंभ संक्रमणएप्लिकेशन प्रोग्रामिंग इंटरफ़ेस (एपीआई) उपयोग संक्रमण हुक से।

वह कोड जो खोज परिणामों को UI में प्रस्तुत करता है, अब इसका उपयोग कर रहा है प्रारंभ संक्रमण एपीआई। यह इनपुट फ़ील्ड को खोज परिणामों के राज्य अद्यतन को बाधित करने की अनुमति देता है। जब लंबित है() फ़ंक्शन "... लोड हो रहा है परिणाम" प्रदर्शित करता है यह इंगित करता है कि एक संक्रमण (एक राज्य से दूसरे राज्य में) हो रहा है।

प्रतिक्रिया उपयोगDeferredValue Hook

UseDeferredValue हुक आपको एक गैर-आग्रहित राज्य अद्यतन के पुन: प्रतिपादन को स्थगित करने की अनुमति देता है। UseTransition हुक की तरह, useDeferredValue हुक एक समवर्ती हुक है। UseDeferredValue हुक एक राज्य को संक्रमण के दौरान अपना मूल मान रखने की अनुमति देता है।

SearchPage घटक useDeferredValue () हुक के साथ

आयात {यूजस्टेट, यूज ट्रांजिशन, यूजडिफर्डवैल्यू} से "प्रतिक्रिया";
समारोहखोज पृष्ठ() {
स्थिरांक [, startTransition] = useTransition ();
 कॉन्स्ट [इनपुट, सेटइनपुट] = यूज़स्टेट ("")
स्थिरांक [सूची, सेटलिस्ट] = यूज़स्टेट ([]);
स्थिरांक सूची आकार = 30000
समारोहसंभाल बदलें(इ) {
सेटइनपुट(इ।लक्ष्य।मूल्य);
 स्टार्ट ट्रांज़िशन (() => {
स्थिरांक सूची आइटम = [];
के लिये (होने देना मैं = 0; मैं सूची आइटम।धकेलना(इ।लक्ष्य।मूल्य);
 }
सेटलिस्ट (सूची आइटम);
 });
 }
स्थिरांक deferredValue = useDeferredValue (इनपुट);
वापसी (
<डिव>
<लेबल>वेब खोज: </label>
<इनपुट प्रकार ="मूलपाठ" मूल्य = {इनपुट} ऑन चेंज = {हैंडल चेंज} />
{सूचीमैप ((आइटम, इंडेक्स) => {
 वापसी <डिव की = {इंडेक्स} इनपुट = {डिफर्ड वैल्यू} >{वस्तु}</div>
 })}
</div>
 );
}
निर्यात करनाचूक खोज पृष्ठ;

ऊपर दिए गए कोड में आप देखेंगे कि लंबित है() फ़ंक्शन अब मौजूद नहीं है। ऐसा इसलिए है क्योंकि आस्थगित मूल्य useDeferredValue हुक से चर बदल देता है लंबित है() राज्य संक्रमण के दौरान कार्य। जब आप कोई नया वर्ण टाइप करते हैं तो खोज परिणाम सूची को ताज़ा करने के बजाय, यह अपने पुराने मानों को तब तक बनाए रखेगा जब तक कि एप्लिकेशन स्थिति को अपडेट न कर दे।

प्रतिक्रिया का उपयोग करेंSyncExternalStore Hook

यूज़ ट्रांज़िशन और यूज़डिफ़रडवैल्यू हुक के विपरीत जो एप्लिकेशन कोड के साथ काम करते हैं, यूज़सिंकएक्सटर्नलस्टोर पुस्तकालयों के साथ काम करता है। यह आपके रिएक्ट एप्लिकेशन को बाहरी पुस्तकालयों से डेटा की सदस्यता लेने और पढ़ने की अनुमति देता है। UseSyncExternalStore हुक निम्नलिखित घोषणा का उपयोग करता है:

स्थिरांक राज्य = useSyncExternalStore (सदस्यता लें, स्नैपशॉट प्राप्त करें [, getServerSnapshot]);

इस हस्ताक्षर में निम्नलिखित शामिल हैं:

• राज्य: डेटा स्टोर का मान जो useSyncExternalStore हुक देता है।
• सदस्यता लेने के: डेटा स्टोर बदलने पर कॉलबैक पंजीकृत करता है।
• स्नैपशॉट प्राप्त करें: डेटा स्टोर का वर्तमान मान लौटाता है।
• getServerSnapshot: सर्वर रेंडरिंग के दौरान उपयोग किया गया स्नैपशॉट लौटाता है।

UseSyncExternalStore के साथ, आप एक संपूर्ण डेटा स्टोर या डेटा स्टोर के भीतर एक विशिष्ट फ़ील्ड की सदस्यता ले सकते हैं।

प्रतिक्रिया उपयोग प्रविष्टि प्रभाव हुक

useInsertionEffect हुक एक और नया रिएक्ट हुक है जो पुस्तकालयों के साथ काम करता है। हालांकि, डेटा स्टोर के बजाय, useInsertionEffect हुक CSS-in-JS लाइब्रेरी के साथ काम करता है। यह हुक स्टाइल रेंडरिंग प्रदर्शन के मुद्दों को संबोधित करता है। यह useLayoutEffect हुक में लेआउट को पढ़ने से पहले DOM को स्टाइल करता है।

प्रतिक्रिया उपयोग आईडी हुक

आप उन परिस्थितियों में useId हुक का उपयोग करते हैं जिनके लिए अद्वितीय आईडी की आवश्यकता होती है (सूची में कुंजियों को छोड़कर)। इसका मुख्य उद्देश्य उन आईडी को उत्पन्न करना है जो क्लाइंट और सर्वर में अद्वितीय रहते हैं, रिएक्ट सर्वर हाइड्रेशन बेमेल त्रुटि से बचते हैं। UseId हुक निम्नलिखित घोषणा का उपयोग करता है:

स्थिरांक आईडी = उपयोग आईडी ()

घोषणा में पहचान एक अद्वितीय स्ट्रिंग है जिसमें शामिल हैं : टोकन. घोषणा के बाद, आप पास कर सकते हैं पहचान सीधे उस तत्व (तत्वों) के लिए चर जिसे इसकी आवश्यकता है।

ये नए हुक प्रतिक्रिया में क्या मूल्य जोड़ते हैं?

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

useSyncExternalStore और useInsertionEffect हुक समवर्ती प्रतिपादन की सुविधा के लिए बाहरी पुस्तकालयों के साथ काम करते हैं। useInsertionEffect हुक CSS-in-JS लाइब्रेरी के साथ काम करता है। UseSyncExternalStore हुक Redux स्टोर जैसे डेटा स्टोर लाइब्रेरी के साथ काम करता है।

साथ में ये हुक प्रदर्शन को एक बड़ा बढ़ावा देते हैं, जो बदले में उपयोगकर्ता अनुभव को बेहतर बनाता है।