इन सर्वोत्तम अभ्यासों के साथ रिएक्ट हुक का अधिकतम लाभ उठाएं

यदि आप रिएक्ट के लिए नए हैं, तो आप सोच रहे होंगे कि रिएक्ट हुक क्या हैं और आपको उनका उपयोग कब करना चाहिए। रिएक्ट ने अपनी 16.8 रिलीज में केवल हुक पेश किए लेकिन वे जल्दी ही पुस्तकालय की एक अनिवार्य विशेषता बन गए।

रिएक्ट हुक की मूल बातों के बारे में सब कुछ जानें और अपने रिएक्ट एप्लिकेशन में उनका उपयोग करने के लिए कुछ सर्वोत्तम अभ्यासों की खोज करें।

रिएक्ट हुक क्या हैं?

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

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

आपको रिएक्ट हुक का उपयोग कब करना चाहिए?

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

एपीआई कॉल के लिए कस्टम हुक बनाएं.

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

रिएक्ट हुक के साथ सर्वोत्तम अभ्यास

अब जब आप जानते हैं कि रिएक्ट हुक क्या हैं और उनका उपयोग कब करना है, तो आइए कुछ सर्वोत्तम प्रथाओं के बारे में बात करते हैं।

1. रिएक्ट फंक्शंस से केवल कॉल हुक

आपको रिएक्ट फ़ंक्शंस से केवल रिएक्ट हुक को कॉल करना चाहिए। यदि आप वर्ग घटक से प्रतिक्रिया हुक को कॉल करने का प्रयास करते हैं, तो आपको एक त्रुटि मिलेगी।

ऐसा इसलिए है क्योंकि आप केवल रिएक्ट फ़ंक्शन से रिएक्ट हुक को कॉल कर सकते हैं। रिएक्ट फ़ंक्शंस वे घटक हैं जिन्हें आप फ़ंक्शन कीवर्ड के साथ घोषित करते हैं।

यहाँ रिएक्ट फ़ंक्शन घटक का एक उदाहरण दिया गया है:

आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
वापस करना (
<डिव>
<पी>{गिनती करना}</पी>
<बटन ऑनक्लिक = {() => सेटकाउंट (गिनती + 1)}>
 मुझे क्लिक करें
</button>
</div>
 );
}

और यहाँ एक वर्ग घटक का एक उदाहरण है:

आयात प्रतिक्रिया, {घटक} से 'प्रतिक्रिया';
कक्षाअनुप्रयोगका विस्तारअवयव{
 राज्य = {
 गिनती: 0
 };
प्रदान करना() {
वापस करना (
<डिव>
<पी>{यह.राज्य.गिनती}</पी>
<बटन ऑनक्लिक = {() => यह.सेटस्टेट ({गिनती: यह.स्टेट.काउंट + 1})}>
 मुझे क्लिक करें
</button>
</div>
 );
 }
}

पहला उदाहरण ऐप घटक को फ़ंक्शन कीवर्ड का उपयोग करके घोषित करता है, जबकि दूसरा वर्ग कीवर्ड का उपयोग करता है।

2. केवल एक उपयोग प्रभाव हुक का प्रयोग करें

यदि आप उपयोग प्रभाव हुक का उपयोग कर रहे हैं, तो आपको प्रति घटक केवल एक का उपयोग करना चाहिए। ऐसा इसलिए है क्योंकि जब भी कोई घटक रेंडर करता है तो यूज़ इफेक्ट चलता है।

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

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
उपयोग प्रभाव (() => {
 कंसोल लॉग ('यह तब चलेगा जब ऐप घटक रेंडर करेगा!');
 }, []);
उपयोग प्रभाव (() => {
 कंसोल लॉग ('यह भी तब चलेगा जब ऐप घटक रेंडर करेगा!');
 }, []);
वापस करना (
<डिव>
<पी>{गिनती करना}</पी>
<बटन ऑनक्लिक = {() => सेटकाउंट (गिनती + 1)}>
 मुझे क्लिक करें
</button>
</div>
 );
}

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

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
उपयोग प्रभाव (() => {
 कंसोल लॉग ('यह तब चलेगा जब ऐप घटक रेंडर करेगा!');
 कंसोल लॉग ('यह भी तब चलेगा जब ऐप घटक रेंडर करेगा!');
 }, []);
वापस करना (
<डिव>
<पी>{गिनती करना}</पी>
<बटन ऑनक्लिक = {() => सेटकाउंट (गिनती + 1)}>
 मुझे क्लिक करें
</button>
</div>
 );
}

इसका मतलब है कि आप केवल पहले उदाहरण से रिएक्ट हुक को कॉल कर सकते हैं। यदि आप दूसरे उदाहरण से रिएक्ट हुक को कॉल करने का प्रयास करते हैं, तो आपको एक त्रुटि मिलेगी।

3. शीर्ष स्तर पर हुक का प्रयोग करें

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

आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
के लिए (होने देना मैं = 0; मैं < 10; मैं++) {
// ऐसा मत करो!
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
 }
वापस करना (
<डिव>
<पी>{गिनती करना}</पी>
<बटन ऑनक्लिक = {() => सेटकाउंट (गिनती + 1)}>
 मुझे क्लिक करें
</button>
</div>
 );
}

उपरोक्त उदाहरण में, ऐप घटक केवल लूप के अंतिम पुनरावृत्ति से केवल गिनती और बटन प्रस्तुत करेगा। ऐसा इसलिए है क्योंकि रिएक्ट केवल अंतिम पुनरावृत्ति से स्टेट वैरिएबल को अपडेट करता है।

लूप के अंदर स्टेट का उपयोग करने के बजाय, आप लूप के बाहर स्टेट वैरिएबल घोषित कर सकते हैं। इस तरह, रिएक्ट केवल एक स्टेट वैरिएबल बनाएगा और उसी के अनुसार इसे अपडेट करेगा।

आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
समारोहअनुप्रयोग() {
// लूप के अंदर यूज़स्टेट का उपयोग करने का यह सही तरीका है
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़स्टेट (0);
के लिए (होने देना मैं = 0; मैं < 10; मैं++) {
// ...
 }
वापस करना (
<डिव>
<पी>{गिनती करना}</पी>
<बटन ऑनक्लिक = {() => सेटकाउंट (गिनती + 1)}>
 मुझे क्लिक करें
</button>
</div>
 );
}

4. हुक का अति प्रयोग न करें

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

रिएक्ट हुक सबसे उपयोगी होते हैं जब आपको कई घटकों के बीच स्थिति साझा करने की आवश्यकता होती है। अनावश्यक हुक का उपयोग करने से बचें क्योंकि वे आपके कोड को पढ़ने में कठिन बना सकते हैं, और अत्यधिक उपयोग किए जाने पर वे प्रदर्शन को प्रभावित कर सकते हैं।

रिएक्ट 18 हुक का उपयोग करके अधिक कार्यात्मकता जोड़ें

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