प्रतिक्रिया में उपयोग प्रभाव को समझना: शून्य से हीरो तक

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

उपयोग प्रभाव क्या है?

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

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

यूज़इफ़ेक्ट क्यों चुनें?

useEffect कई कारणों से रिएक्ट में साइड इफेक्ट्स के प्रबंधन के लिए एक शक्तिशाली हुक है:

1. कोड का सरलीकरण: यह वर्ग-आधारित घटकों और जीवनचक्र विधियों की आवश्यकता को समाप्त करता है, जिससे आप क्लीनर, कार्यात्मक-आधारित कोड लिख सकते हैं।
2. केंद्रीकृत दुष्प्रभाव: आप सभी दुष्प्रभावों को एक ही स्थान पर प्रबंधित कर सकते हैं, जैसे डेटा प्राप्त करना या DOM को अपडेट करना।
3. बेहतर पठनीयता: यह जीवनचक्र की घटनाओं को प्रबंधित करने के तरीके को सुव्यवस्थित करता है, जिससे कोड अधिक पठनीय और कम जटिल हो जाता है।
4. लचीलापन: यूज़इफेक्ट के साथ, आपके पास इस पर अधिक नियंत्रण होता है कि कब और कितनी बार साइड इफेक्ट निष्पादित होते हैं, क्योंकि आप निर्भरता को परिभाषित कर सकते हैं जो निर्धारित करते हैं कि प्रभाव कब चलना चाहिए।

यह कैसे काम करता है?

useEffect हुक दो तर्क स्वीकार करता है:

1. प्रभाव फ़ंक्शन: इस फ़ंक्शन में साइड इफेक्ट तर्क शामिल हैं, जैसे डेटा प्राप्त करना या सदस्यता सेट करना।
2. निर्भरता सरणी (वैकल्पिक): मानों की एक सरणी जो निर्धारित करती है कि प्रभाव को फिर से कब चलाया जाना चाहिए। यदि निर्भरता सरणी में कोई मान बदलता है, तो प्रभाव फिर से निष्पादित होता है। यदि आप इस सरणी को छोड़ देते हैं, तो प्रभाव प्रत्येक रेंडर के बाद चलेगा।

यहां एक बुनियादी संरचना है:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

उदाहरण:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

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

उपयोग में आने वाले दुष्प्रभावों को नियंत्रित करना

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

सफाई के बिना प्रभाव

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

उदाहरण के लिए, यहां एक ऐसा परिदृश्य है जहां किसी सफाई की आवश्यकता नहीं है:

import React, { useState, useEffect } from 'react';

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

इस मामले में, हर बार गिनती की स्थिति बदलने पर प्रभाव चलता है। चूँकि हम सदस्यताएँ स्थापित नहीं कर रहे हैं या बाहरी संसाधनों का प्रबंधन नहीं कर रहे हैं, इसलिए कोई सफ़ाई आवश्यक नहीं है।

सफ़ाई के साथ प्रभाव

यदि आपके प्रभाव में सदस्यता या टाइमर सेट करना शामिल है, तो आपको प्रभाव के बाद सफाई करने की आवश्यकता होगी। उदाहरण के लिए, एक ऐसे परिदृश्य की कल्पना करें जहां हम एक टाइमर सेट करना चाहते हैं:

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

यहां क्या हो रहा है:

1. सेटइंटरवल फ़ंक्शन एक टाइमर सेट करता है जो हर सेकंड समय बढ़ाता है।
2. क्लिनअप फ़ंक्शन (useEffect द्वारा लौटाया गया) घटक के अनमाउंट होने पर अंतराल को साफ़ करता है। यह सुनिश्चित करता है कि घटक हटा दिए जाने के बाद भी टाइमर चलता नहीं रहेगा।

प्रभाव परिदृश्यों के उपयोग के उदाहरण

आइए कुछ सामान्य परिदृश्यों का पता लगाएं जहां उपयोग प्रभाव विशेष रूप से उपयोगी है।

कंपोनेंट माउंट पर डेटा लाया जा रहा है

घटक माउंट होने पर डेटा प्राप्त करना उपयोग प्रभाव के लिए सबसे आम उपयोग मामलों में से एक है।

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

DOM को अद्यतन कर रहा है

आप रेंडरिंग के बाद DOM को मैन्युअल रूप से हेरफेर करने के लिए useEffect का उपयोग कर सकते हैं, हालाँकि ऐसा बहुत कम किया जाना चाहिए क्योंकि React DOM को कुशलतापूर्वक प्रबंधित करता है।

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

कंपोनेंट अनमाउंट पर सफाई

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

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

पूछे जाने वाले प्रश्न

1. यदि मैं उपयोग प्रभाव में निर्भरता सरणी को छोड़ दूं तो क्या होगा?

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

2. क्या मैं यूज़इफ़ेक्ट केवल एक बार चला सकता हूँ?

हां, एक खाली निर्भरता सरणी पास करना [] यह सुनिश्चित करता है कि घटक माउंट होने के बाद प्रभाव केवल एक बार चलता है।

3. यूज़इफ़ेक्ट में क्लीनअप फ़ंक्शन क्या है?

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

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