useEffect हुक
useEffect हुक रिएक्ट (React) का एक अत्यंत महत्वपूर्ण हिस्सा है जो फ़ंक्शनल कॉम्पोनेन्ट्स में "साइड इफ़ेक्ट्स" (side effects) को नियंत्रित करने की क्षमता प्रदान करता है। पारंपरिक रूप से, साइड इफ़ेक्ट्स जैसे API कॉल, DOM अपडेट, या टाइमर सेट करना केवल क्लास कॉम्पोनेन्ट्स में लाइफ़साइकल मेथड्स (componentDidMount, componentDidUpdate, componentWillUnmount) के माध्यम से संभव था। लेकिन useEffect हुक ने इस प्रक्रिया को फ़ंक्शनल कॉम्पोनेन्ट्स में सरल, सुव्यवस्थित और अधिक शक्तिशाली बना दिया है।
useEffect हर रेंडर के बाद चलाया जाता है, लेकिन डेवलपर इसे नियंत्रित कर सकता है कि यह कब और कितनी बार चले। यह नियंत्रण “डिपेंडेंसी एरे” (dependency array) के माध्यम से किया जाता है। इस एरे में बताए गए मान बदलने पर ही useEffect फिर से चलता है।
इस ट्यूटोरियल में, आप सीखेंगे कि useEffect हुक का उपयोग कब और कैसे करना चाहिए, साइड इफ़ेक्ट्स को सुरक्षित रूप से कैसे हैंडल करें, और कैसे अपने कॉम्पोनेन्ट्स को प्रदर्शन (performance) के लिहाज़ से बेहतर बनाया जा सकता है। आधुनिक वेब एप्लिकेशन और SPA (Single Page Applications) में यह हुक डेटा प्रवाह (data flow), स्टेट मैनेजमेंट और लाइफ़साइकल नियंत्रण का एक मूल स्तंभ है।
मूल उदाहरण
jsximport React, { useState, useEffect } from "react";
function घड़ी() {
const [समय, सेटसमय] = useState(new Date().toLocaleTimeString());
useEffect(() => {
const टाइमर = setInterval(() => {
सेटसमय(new Date().toLocaleTimeString());
}, 1000);
// सफाई (cleanup) फ़ंक्शन
return () => clearInterval(टाइमर);
}, []); // केवल एक बार चलना है (माउंट पर)
return (
<div style={{ textAlign: "center", marginTop: "40px" }}> <h2>वर्तमान समय:</h2> <p>{समय}</p> </div>
);
}
export default घड़ी;ऊपर दिए गए उदाहरण में useEffect हुक का उपयोग एक साधारण लेकिन शक्तिशाली काम के लिए किया गया है — एक लाइव घड़ी बनाना। हमने useState से एक "समय" नाम का स्टेट बनाया है और setInterval के माध्यम से हर सेकंड उसे अपडेट किया है। यह एक क्लासिक "साइड इफ़ेक्ट" है, क्योंकि यह बाहरी दुनिया के साथ इंटरैक्ट करता है (समय अपडेट)।
useEffect के अंदर हमने एक “क्लीनअप फ़ंक्शन” (cleanup function) भी जोड़ा है, जो clearInterval को कॉल करता है। जब यह कॉम्पोनेन्ट अनमाउंट होता है, यह फ़ंक्शन टाइमर को रोक देता है। यह रिएक्ट (React) का महत्वपूर्ण लाइफ़साइकल पैटर्न है — साइड इफ़ेक्ट्स को शुरू करना और बाद में उन्हें समाप्त करना।
ध्यान दें कि हमने डिपेंडेंसी एरे को खाली रखा है []। इसका मतलब है कि यह इफ़ेक्ट केवल एक बार — माउंटिंग के समय — चलेगा। अगर हमने इसे छोड़ा होता, तो useEffect हर रेंडर के बाद चल जाता, जिससे अनंत लूप बन सकता था। यह उदाहरण दिखाता है कि useEffect किस तरह “लाइफ़साइकल” व्यवहार को नियंत्रित करता है और फ़ंक्शनल कॉम्पोनेन्ट्स को पूरी तरह स्वायत्त बनाता है।
व्यावहारिक उदाहरण
jsximport React, { useState, useEffect } from "react";
function उपयोगकर्ता_सूची() {
const [उपयोगकर्ता, सेटउपयोगकर्ता] = useState([]);
const [लोडिंग, सेटलोडिंग] = useState(true);
const [त्रुटि, सेटत्रुटि] = useState(null);
useEffect(() => {
let कैंसल = false;
async function डेटा_लाओ() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) throw new Error("डेटा लोड करने में त्रुटि");
const data = await response.json();
if (!कैंसल) {
सेटउपयोगकर्ता(data);
सेटलोडिंग(false);
}
} catch (err) {
if (!कैंसल) {
सेटत्रुटि(err.message);
सेटलोडिंग(false);
}
}
}
डेटा_लाओ();
return () => {
कैंसल = true;
};
}, []);
if (लोडिंग) return <p>डेटा लोड हो रहा है...</p>;
if (त्रुटि) return <p>त्रुटि: {त्रुटि}</p>;
return (
<div style={{ padding: "20px" }}> <h2>उपयोगकर्ता सूची</h2> <ul>
{उपयोगकर्ता.map((user) => ( <li key={user.id}>{user.name}</li>
))} </ul> </div>
);
}
export default उपयोगकर्ता_सूची;यह उदाहरण useEffect हुक का वास्तविक और उन्नत उपयोग दिखाता है। जब कॉम्पोनेन्ट पहली बार माउंट होता है, तो यह एक बाहरी API से डेटा लाता है। हमने तीन स्टेट बनाए हैं: उपयोगकर्ता, लोडिंग और त्रुटि — जो स्टेट मैनेजमेंट के मूल स्तंभ हैं।
useEffect के अंदर एक असिंक्रोनस फ़ंक्शन डेटा_लाओ बनाया गया है जो API से डेटा प्राप्त करता है। इसमें एक “कैंसल” फ़्लैग का उपयोग किया गया है ताकि अगर कॉम्पोनेन्ट डेटा लोड होने से पहले अनमाउंट हो जाए, तो स्टेट अपडेट न किया जाए। यह एक सामान्य उन्नत पैटर्न है जो साइड इफ़ेक्ट्स को सुरक्षित बनाता है।
यह कोड रिएक्ट (React) के डेटा फ्लो और लाइफ़साइकल को बेहतरीन तरीके से दर्शाता है। useEffect का यह पैटर्न उन स्थितियों में उपयोगी है जहाँ हमें नेटवर्क रिक्वेस्ट्स, सब्स्क्रिप्शन या DOM इंटरैक्शन को नियंत्रित करना होता है। यह SPA विकास में अत्यंत आवश्यक है।
रिएक्ट (React) Best Practices और सामान्य गलतियाँ:
useEffect हुक का उपयोग करते समय कुछ प्रमुख Best Practices अपनाना आवश्यक है:
- हमेशा डिपेंडेंसी एरे को सही परिभाषित करें — useEffect के भीतर इस्तेमाल होने वाले हर स्टेट या प्रॉप को शामिल करें।
- क्लीनअप फ़ंक्शन को जोड़ना न भूलें ताकि इवेंट लिसनर, टाइमर या API कैंसलेशन को ठीक से संभाला जा सके।
- बड़े इफ़ेक्ट्स को छोटे-छोटे useEffect में बाँटें — इससे पठनीयता और डीबगिंग आसान होती है।
सामान्य गलतियाँ:
- डिपेंडेंसी एरे को छोड़ देना जिससे अनंत लूप हो सकता है।
- स्टेट को सीधे बदलना (mutation) बजाय setState या setter फ़ंक्शन का उपयोग करना।
-
अनावश्यक री-रेंडरिंग जिससे प्रदर्शन प्रभावित होता है।
परफॉर्मेंस सुझाव: -
useMemoऔरuseCallbackका प्रयोग करें ताकि अनावश्यक गणनाओं और फ़ंक्शन री-क्रिएशन से बचा जा सके। - React Strict Mode का उपयोग करें ताकि डुप्लीकेट इफ़ेक्ट निष्पादन का परीक्षण हो सके।
-
डेटा फेचिंग के लिए React Query या SWR जैसे टूल्स पर विचार करें।
सुरक्षा: -
useEffect में आने वाले बाहरी डेटा को हमेशा सत्यापित करें।
- Async कॉल्स में error हैंडलिंग अनिवार्य रखें।
📊 संदर्भ तालिका
| रिएक्ट (React) Element/Concept | Description | Usage Example |
|---|---|---|
| useEffect | साइड इफ़ेक्ट्स को संभालने के लिए हुक | useEffect(() => {console.log("mounted")}, []) |
| Dependency Array | इफ़ेक्ट के चलने की शर्तें निर्धारित करता है | useEffect(() => {...}, [count]) |
| Cleanup Function | अनमाउंट के समय साइड इफ़ेक्ट्स को हटाता है | return () => clearInterval(timer) |
| Multiple useEffect | अलग-अलग इफ़ेक्ट्स को अलग रखता है | useEffect(...); useEffect(...) |
| Async useEffect | डेटा फेच या नेटवर्क ऑपरेशन | useEffect(() => {fetchData()}, []) |
| Conditional Execution | केवल किसी शर्त पर इफ़ेक्ट चलाना | if(isActive){...} |
सारांश और आगे के कदम:
useEffect हुक को सीखना रिएक्ट (React) डेवलपमेंट की नींव को मजबूत करता है। यह फ़ंक्शनल कॉम्पोनेन्ट्स में लाइफ़साइकल और डेटा फ्लो को नियंत्रित करने का सबसे प्रभावी तरीका है। आपने जाना कि यह हुक API कॉल, DOM मैनिपुलेशन, इवेंट लिसनिंग और टाइमर जैसे साइड इफ़ेक्ट्स को कैसे संभालता है।
आगे आप निम्न विषयों पर ध्यान दे सकते हैं:
- useMemo और useCallback से परफॉर्मेंस सुधारना
- useContext और useReducer से उन्नत स्टेट मैनेजमेंट
- कस्टम हुक बनाना जो useEffect की लॉजिक को पुन: उपयोग कर सकें
प्रैक्टिकल रूप से, useEffect हर आधुनिक SPA में डेटा सिंक्रोनाइज़ेशन, UI अपडेट और रीयल-टाइम फीड्स जैसी कार्यक्षमताओं के लिए अनिवार्य है। इसके साथ आप रिएक्ट (React) में उच्च गुणवत्ता, स्थिर और प्रदर्शन-अनुकूल कोड लिख सकते हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी