React में useEffect हुक

प्रभावों के साथ काम करने के लिए हुक useEffect का उपयोग किया जाता है। आइए इसके काम को देखें।

सबसे पहले अपने हुक को आयात करें:

import { useEffect } from 'react';

एक App कंपोनेंट बनाएं जिसमें एक शीर्षक हो:

function App() {
	return (
		<div>
			<h1>React App</h1>
		</div>
	);
}

export default App;

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

अपने हुक को लागू करें:

function App() {
	useEffect(() => {
		document.body.style.backgroundColor = 'green';
	}, []);
	
	...
}

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

हुक useEffect की सहायता से पेज का शीर्षक बदलें।