React में useEffect में निर्भरताएँ

अब चलिए बटन दबाने पर रंग बदलेंगे। रंग के लिए एक color स्टेट बनाएंगे, इसे एक प्रारंभिक मान देकर:

const [color, setColor] = useState('green');

अपने useEffect में स्ट्रिंग मान को अपने स्टेट से बदलें और वर्गाकार कोष्ठकों में निर्भरताओं की सूची में इसे जोड़ना न भूलें। अब स्टेट color के बदलने पर प्रभाव हर बार निष्पादित होगा:

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

अब चलिए अपने कंपोनेंट में रंग बदलने के लिए एक बटन जोड़ते हैं:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

एक क्लिक हैंडलर फ़ंक्शन भी जोड़ते हैं, जो हमारे रंग को नारंगी में बदल देगा:

function changeColor() {
	setColor('orange');
}

उपयोगकर्ता नाम के साथ एक स्टेट दिया गया है। ऐसा करें कि हर बार नाम बदलने पर, स्टेट का मान ब्राउज़र के लोकल स्टोरेज में लिखा जाए।