React में डेवलपमेंट टीम ने React वर्जन 16.8 में Hooks की अवधारणा पेश की। एक React Hook फंक्शन कंपोनेंट में स्टेट और अन्य React फीचर्स के उपयोग की अनुमति देता है। useState हुक के साथ, एक फंक्शन कंपोनेंट को क्लास कंपोनेंट के रूप में फिर से लिखे बिना अपना आंतरिक स्टेट सेट कर सकता है।
React क्लास और फंक्शनल कंपोनेंट्स में अंतर की समीक्षा के लिए इस गाइड को देखें।
React में एक और व्यापक रूप से उपयोग किया जाने वाला हुक useEffect है। useEffect के साथ, साइड इफेक्ट्स (या "इफेक्ट्स") एक फंक्शनल कंपोनेंट के संदर्भ से किए जाते हैं। याद रखें कि साइड इफेक्ट्स जावास्क्रिप्ट फंक्शन्स में भी होते हैं।
साइड इफेक्ट्स तब होते हैं जब एक फंक्शन अपनी बॉडी के बाहर कुछ बदलता है। React में, यह वही बात है और इसमें डेटा फेचिंग, सब्सक्रिप्शन, या React कंपोनेंट्स से पहले DOM बदलना शामिल हो सकता है।
useEffect क्या है?
React हुक useEffect एक फंक्शनल कंपोनेंट को साइड इफेक्ट्स करने की अनुमति देता है। यह React क्लास कंपोनेंट्स में लाइफसाइकिल मेथड्स componentDidMount, componentWillUpdate, और componentWillUnmount के समान फैशन में काम करता है। अधिक विवरण के लिए React लाइफसाइकिल मेथड्स पर इस परिचय को देखें।
इस लेख में, हम देखेंगे कि Hooks का उपयोग कैसे शुरू करें इसका एक बेसिक उदाहरण। इस लेख का उद्देश्य परिचय के रूप में काम करना है, गहन विश्लेषण नहीं। एक बार जब आप React Hooks से परिचित हो जाएं तो useEffect पर इस व्यापक नजर को पढ़ें।
React Hooks सिंटैक्स
useEffect को समझने के लिए, हमें पहले useState हुक के सिंटैक्स पर संक्षेप में जाने की आवश्यकता है। जब Hooks का उपयोग किया जाता है, तो उन्हें ठीक उसी तरह इम्पोर्ट किया जाना चाहिए जैसे React इम्पोर्ट किया जाता है।
import React, { useState, useEffect } from 'react';
अब हम अपने Hooks के साथ अपना फंक्शनल कंपोनेंट परिभाषित कर सकते हैं। यह जावास्क्रिप्ट फंक्शन स्कोप का उपयोग कर रहा है। जब हम फंक्शनल कंपोनेंट के अंदर अपना useEffect हुक परिभाषित करते हैं, तो स्कोप के माध्यम से इसकी स्टेट और प्रॉप्स तक पहुंच होती है। स्कोप पर अधिक के लिए, इस प्राइमर के साथ समीक्षा करें।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
useState सिंटैक्स
स्पष्टता के लिए, आइए हमारे उदाहरण के लिए एक साधारण काउंटर का उपयोग करें। हम DOM में आउटपुट करेंगे कि बटन कितनी बार क्लिक किया गया है। इम्पोर्ट्स के साथ पूरा हमारा फंक्शनल कंपोनेंट इस तरह दिखेगा:
import React, {useState, useEffect} from 'react' import ReactDOM from 'react-dom' const ButtonCounter = () => { return ( <button>Click Me</button> ) } ReactDOM.render( <ButtonCounter />, document.getElementById('container') );
यह हमारे बटन को DOM में रेंडर करता है। useEffect को परिभाषित करने से पहले, हम useState हुक को परिभाषित करके अपना प्रारंभिक स्टेट सेट कर सकते हैं।
const [count, setCount] = useState(0);
इस सिंटैक्स का उपयोग करके, React पहले वेरिएबल को प्रारंभिक स्टेट पर सेट करता है। इस मामले में, वेरिएबल "count" को useState को पास किए गए आर्गुमेंट द्वारा सेट किया जाता है। React ने हमारे count के प्रारंभिक स्टेट को 0 पर सेट कर दिया है। दूसरा वेरिएबल count को अपडेट करने के लिए फंक्शन के रूप में उपयोग किया जाएगा।
अब जब हमने count के प्रारंभिक स्टेट को 0 पर सेट कर दिया है, तो हम अपने setCount फंक्शन का उपयोग स्टेट को अपडेट करने के लिए कर सकते हैं।
const ButtonCounter = () => { const [count, setCount] = useState(0); return ( <div> <p>You clicked the button {count} times</p> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ) }
हमारे onClick प्रॉपर्टी पर कॉलबैक फंक्शन के रूप में हमारे setCount का उपयोग करके, हम हर बार बटन क्लिक होने पर DOM को अपडेट कर सकते हैं।
इसका मतलब है कि useState के साथ अपना प्रारंभिक स्टेट सेट करते समय परिभाषित हमारा setCount फंक्शन काम कर रहा है! अब जब हमने useState हुक के सिंटैक्स को देख लिया है, तो आइए useEffect को देखें।
useEffect सिंटैक्स
जैसा कि पहले कहा गया है, useEffect साइड इफेक्ट्स के उपयोग को परिभाषित करता है। डेटा फेचिंग और मैन्युअल DOM परिवर्तनों के माध्यम से कंपोनेंट्स में परिवर्तन साइड इफेक्ट्स का गठन करते हैं। useEffect हुक हर बार कंपोनेंट रेंडर होने पर कॉल किया जाता है।
यह React क्लास कंपोनेंट्स में componentDidMount और componentDidUpdate के समान काम करता है। हमारे काउंटर उदाहरण के साथ आगे बढ़ते हुए, हम useEffect को अपने DOM को अपडेट करके हमारे <p> एलिमेंट में एक नाम प्रदर्शित करवाएंगे।
const [count, setCount] = useState(0); const [name, setName] = useState(" "); useEffect(() => { setName(name + "Ryan") }) return ( <div> <p>Hello {name}! You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click Me</button> </div> ) }
यह जानबूझकर गलत कोड किया गया है। DOM में जो पुश होता है वह साबित करता है कि useEffect को कंपोनेंट के प्रत्येक रेंडर के साथ कॉल किया जाता है।
यह इसलिए हो रहा है क्योंकि डिफ़ॉल्ट रूप से, useEffect हुक componentDidMount और componentWillUpdate के संयोजन की तरह व्यवहार करता है।
अपने हुक को कस्टमाइज़ करने के लिए ताकि यह केवल तभी रेंडर हो जब कंपोनेंट माउंट हो, हम useEffect को दूसरा आर्गुमेंट भेज सकते हैं। useEffect को दूसरे आर्गुमेंट के रूप में एक खाली ऐरे ([]) पास करके, React जानता है कि useEffect को केवल तभी कॉल करे जब कंपोनेंट माउंट हो।
useEffect(() => { setName(name + "Ryan") }, [])
अब, हमें अपने फंक्शनल कंपोनेंट के माउंट होने पर केवल एक बार स्ट्रिंग "Ryan" प्रदर्शित होती दिखनी चाहिए।
बहुत बढ़िया! Hooks का उपयोग करने की आदत डालने में कुछ समय लगेगा। इसे ध्यान में रखते हुए, आधिकारिक React डॉक्यूमेंटेशन में Hooks के उपयोग पर एक अपडेटेड गाइड है। इसे यहां पढ़ें।
निष्कर्ष
React useEffect हुक के इस परिचय में, हमने सीखा कि Hooks क्या हैं और उनका उपयोग कैसे करें। हमने एक प्राथमिक उदाहरण के साथ useState और useEffect Hooks के सिंटैक्स को भी कवर किया।
Hooks के संभावित उपयोग यहां कवर किए गए से कहीं आगे जाते हैं। इसे पढ़ने और अपने कोड में कुछ समय बिताने के बाद, लिंक किए गए संसाधनों पर जाकर React Hooks पर अपनी पकड़ गहरी करें। हालांकि क्लास कंपोनेंट्स कहीं नहीं जा रहे, Hooks React का भविष्य हैं, इसलिए उन पर सूचित और अपडेट रहें!
