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

रिएक्ट 18 में अपग्रेड कैसे करें

रिएक्ट के नवीनतम संस्करण को स्थापित करने के लिए इस कमांड को टर्मिनल में चलाएँ:

NPM इंस्टॉल प्रतिक्रिया प्रतिक्रिया-डोम

या यदि आप यार्न का उपयोग कर रहे हैं:

यार्न प्रतिक्रिया प्रतिक्रिया-डोम जोड़ें

एक बार जब आप नवीनतम संस्करण स्थापित कर लेते हैं, तो आप इसकी नई सुविधाओं का लाभ उठाना शुरू कर सकते हैं।

रिएक्ट 18 में कई अतिरिक्त हैं; यहाँ चार सबसे उल्लेखनीय हैं।

1. सख्त मोड

स्ट्रिक्टमोड एक ऐसी सुविधा है जिसका उपयोग आप किसी एप्लिकेशन में संभावित समस्याओं को उजागर करने के लिए कर सकते हैं। सख्त मोड जांच केवल विकास मोड में चलती है और उत्पादन निर्माण को प्रभावित नहीं करेगी। हालांकि, वे आपके कोड में संभावित समस्याओं की पहचान करने में बहुत उपयोगी हो सकते हैं।

आप अपने आवेदन के किसी भी भाग के लिए सख्त मोड सक्षम कर सकते हैं। उदाहरण के लिए, आप इसे अपने सभी घटकों के लिए, या केवल उनमें से कुछ के लिए सक्षम कर सकते हैं।

instagram viewer 
आयात प्रतिक्रिया से 'प्रतिक्रिया';
समारोहडेमोउदाहरण() {
वापसी (
<डिव>
<फर्स्टकंपोनेंट />
<प्रतिक्रिया। सख्त मोड>
<दूसरा घटक />
<तीसरा घटक />
</React.StrictMode>
<चौथा घटक />
</div>
 );
}

उपरोक्त कोड में, संभावित समस्याओं के लिए सभी चार घटकों की जाँच की जाएगी। हालाँकि, सख्त मोड जाँच केवल उन पर लागू होगी तथा .

StrictMode अन्य तरीकों से भी मदद करता है, जैसे:

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

कुल मिलाकर, सख्त मोड आपके कोड में संभावित समस्याओं की पहचान करने में मदद करने के लिए विकास में एक उपयोगी विशेषता हो सकती है।

2. बदलाव

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

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

UI अपडेट को ट्रांज़िशन के रूप में चिह्नित करने के लिए आप startTransition फ़ंक्शन का उपयोग कर सकते हैं। यहाँ एक उदाहरण है:

आयात {शुरुआत संक्रमण} से 'प्रतिक्रिया';
स्टार्ट ट्रांज़िशन (() => {
// किसी भी गैर-जरूरी राज्य अपडेट को संक्रमण के रूप में चिह्नित करें
});

यह कोड startTransition फ़ंक्शन के अंदर सभी स्टेट अपडेट को ट्रांज़िशन के रूप में चिह्नित करेगा। इस तरह, रिएक्ट अन्य महत्वपूर्ण यूआई अपडेट पर ध्यान केंद्रित कर सकता है।

3. स्वचालित बैचिंग

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

पहले, यदि आपने कोई वादा किया था या नेटवर्क कॉल कर रहे थे, तो राज्य अपडेट को बैच नहीं किया जाएगा, और रिएक्ट को कई बार फिर से प्रस्तुत करना होगा। हालाँकि, रिएक्ट 18 में स्वचालित बैचिंग के साथ, सभी राज्य अपडेट को वादों, सेटटाइमआउट और इवेंट कॉलबैक के भीतर भी बैच दिया जाता है। यह उस काम को काफी कम कर देता है जो रिएक्ट को बैकग्राउंड में करना होता है।

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

4. नए हुक

संस्करण 18 कई नए पेश करता है प्रतिक्रिया हुक, useId, useTransition, और useDeferredValue सहित। ये नए हुक न्यूनतम प्रयास के साथ आपके रिएक्ट ऐप्स में अतिरिक्त कार्यक्षमता जोड़ने का एक शानदार तरीका प्रदान करते हैं।

रिएक्ट 18 ऐप के प्रदर्शन में वृद्धि करता है

रिएक्ट 18 यहाँ है, और यह अपने साथ वेब ऐप के प्रदर्शन में कुछ बेहतरीन सुधार लाता है। रिएक्ट के नए संस्करण के साथ, आप आसानी से ऐसे वेब ऐप बना सकते हैं जो अधिक प्रतिक्रियाशील हों और समग्र रूप से बेहतर प्रदर्शन करें। इसलिए यदि आप एक ऐसा वेब ऐप बनाना चाहते हैं जो सुचारू रूप से चले और शानदार दिखे, तो रिएक्ट 18 को अवश्य देखें।