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

आइए हुक्स के पीछे की मुख्य अवधारणाओं को तोड़ें:

1. रिएक्ट हुक क्यों?

हुक से पहले, स्टेटफुल लॉजिक केवल क्लास घटकों में लागू किया जा सकता था। कार्यात्मक घटक राज्यविहीन थे, जिससे वे कम बहुमुखी बन गए। हुक्स को यहां पेश किया गया:

• कार्यात्मक घटकों में स्टेटफुल लॉजिक की अनुमति दें।
• घटकों में स्टेटफुल लॉजिक आसानी से साझा करें।
• बॉयलरप्लेट कोड से बचें (उदाहरण के लिए, क्लास घटकों में जीवनचक्र विधियां)।
• घटक के पुन: उपयोग और मॉड्यूलरिटी को बढ़ाएं।

2. हुक के बुनियादी नियम

हुक का उपयोग करते समय पालन करने के लिए दो प्रमुख नियम हैं:

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

3. अंतर्निर्मित रिएक्ट हुक

आइए रिएक्ट में कुछ प्रमुख अंतर्निर्मित हुक के बारे में जानें:

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

सिंटैक्स:

const [state, setState] = useState(initialState);

• राज्य: वर्तमान राज्य मूल्य।
• setState: फ़ंक्शन जो आपको राज्य को अपडेट करने की अनुमति देता है।
• प्रारंभिक स्थिति: राज्य का प्रारंभिक मूल्य।

उपयोगप्रभाव
यूज़इफ़ेक्ट वह हुक है जिसका उपयोग कार्यात्मक घटकों में साइड इफेक्ट को संभालने के लिए किया जाता है। इसमें डेटा प्राप्त करना, सदस्यता लेना या सीधे DOM के साथ इंटरैक्ट करना शामिल हो सकता है।

सिंटैक्स:

useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

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

4. अन्य उपयोगी हुक

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

हुक के लाभ

• क्लीनर कोड: हुक घटकों को पढ़ने और समझने में आसान बनाते हैं।
• पुन: प्रयोज्यता: हुक आपको एचओसी के बिना घटकों के बीच तर्क साझा करने या प्रॉप्स प्रस्तुत करने की अनुमति देते हैं।
• बेहतर स्थिति प्रबंधन: स्थिति और दुष्प्रभावों का अधिक विस्तृत नियंत्रण।
• कार्यात्मक घटक लाभ: रिएक्ट घटकों में कार्यात्मक प्रोग्रामिंग के पूर्ण उपयोग को सक्षम बनाता है।

हुक ने हमारे रिएक्ट घटकों को लिखने के तरीके में क्रांति ला दी, वर्ग-आधारित घटकों से हटकर राज्य प्रबंधन और साइड इफेक्ट्स के लिए अधिक कार्यात्मक, संक्षिप्त और पुन: प्रयोज्य दृष्टिकोण की ओर रुख किया।