useEffect का परिचय
useEffect एक component को screen पर draw होने के बाद कुछ extra करने देता है, जैसे लिखना खत्म करने के ठीक बाद एक postcard भेजना।
Syntax
useEffect(() => {
// side-effect code runs after render
});What useEffect Is For
useEffect एक component को ऐसा code run करने देता है जो directly render करने के बारे में नहीं है, जैसे data fetch करना या एक subscription setup करना। React यह code component render होने और DOM असल में update होने के बाद run करता है।
Note:
useEffect को उस जगह के रूप में सोचें जो React से बाहर reach करने वाली किसी भी चीज़ के लिए है -- timers, network requests, manual DOM changes।
Warning:
ऐसी चीज़ों के लिए useEffect उपयोग न करें जो render के दौरान directly calculate की जा सकती हैं -- यह एक unnecessary extra step जोड़ता है।
उदाहरण: What useEffect Is For
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Logger() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("Rendered! Count is", count);
});
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Logger />);
</script>
</body>
</html>Basic useEffect Syntax
useEffect अपने पहले argument के रूप में एक function लेता है, जिसे React render के बाद call करता है। बिना second argument के, यह function हर single render के बाद run होता है -- बिल्कुल पहले वाले render सहित।
Note:
हमेशा simple शुरू करें: बिना dependency array के effect को working बनाएं, फिर यह समझने के बाद एक जोड़ें कि इसे कब re-run होना चाहिए।
Warning:
बिना dependency array वाला एक effect हर render के बाद run होता है, जो expensive हो सकता है या loops cause कर सकता है अगर यह state भी update करे।
उदाहरण: Basic useEffect Syntax
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function WindowSizeLogger() {
React.useEffect(() => {
console.log("Window width:", window.innerWidth);
});
return <p>Check the console after any state change.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<WindowSizeLogger />);
</script>
</body>
</html>Effects Run After the DOM Updates
Render के दौरान directly की गई calculations के विपरीत, effect code तब run होता है जब React ने असली DOM को latest render से match करने के लिए already update कर दिया हो। इसका मतलब है एक effect safely current DOM पढ़ सकता है, जैसे एक element का size measure करना।
Note:
अगर आपको असल रूप से rendered DOM से कुछ पढ़ना है (जैसे एक element की width), तो यह करने की सही जगह useEffect है।
Warning:
क्योंकि effects painting के बाद run होते हैं, उनके अंदर कोई भी state updates एक additional, अलग re-render trigger करते हैं।
उदाहरण: Effects Run After the DOM Updates
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MountMessage() {
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
});
return <p>{mounted ? "Mounted and effect ran!" : "Rendering..."}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<MountMessage />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- Dependency array को पूरी तरह भूल जाना, जिससे effect हर single render के बाद run होता है।
- Effect function को खुद directly
asyncबनाने की कोशिश करना, जो supported नहीं है। - यह उम्मीद करना कि useEffect browser paint करने से पहले run होगा -- यह बाद में run होता है।
चैप्टर सारांश
- useEffect आपको rendering के response में code run करने देता है, React के अपने rendering से बाहर की चीज़ों के लिए।
- यह component render होने और DOM update होने के बाद run होता है।
- Common uses में data fetching, subscriptions, और manually DOM बदलना शामिल है।
- यह एक function और dependencies का एक optional array लेता है।
ब्राउज़र सपोर्ट
React 16.8 से available है, जब Hooks introduce हुए थे।
🔒
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: