यूजइफेक्ट हुक रिएक्ट का एक मूलभूत हिस्सा है, जो आपको कार्यात्मक घटकों में साइड इफेक्ट करने की अनुमति देता है। यहां एक विस्तृत विवरण दिया गया है:

यूज़इफ़ेक्ट क्या है?

• useEffect हुक आपको अपने घटकों में साइड इफेक्ट्स करने देता है, जैसे डेटा प्राप्त करना, सदस्यता लेना, या DOM को मैन्युअल रूप से बदलना।
• इसे जीवनचक्र विधियों कंपोनेंटडिडमाउंट, कंपोनेंटडिडअपडेट और कंपोनेंटविलअनमाउंट का संयोजन माना जा सकता है।

सिंटेक्स

useEffect(() => {
  // Your side effect code here

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

पैरामीटर

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

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

3. निर्भरता सरणी: दूसरा तर्क निर्भरता की एक सरणी है। प्रभाव तभी चलता है जब कोई एक निर्भरता बदलती है। यदि आप एक खाली सरणी ([]) पास करते हैं, तो प्रभाव प्रारंभिक रेंडर के बाद केवल एक बार चलता है (जैसे कंपोनेंटडिडमाउंट)।

उपयोग के उदाहरण

1. मूल उदाहरण: माउंट पर डेटा लाया जा रहा है

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

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. क्लीनअप उदाहरण: किसी इवेंट की सदस्यता लेना

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. निर्भरता उदाहरण: प्रोप परिवर्तन के आधार पर एक प्रभाव चलाना

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

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

सर्वोत्तम प्रथाएं

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

निष्कर्ष

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