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');
}

ব্যবহারকারীর নাম সহ একটি স্টেট দেওয়া আছে। এটি এমনভাবে করুন যাতে প্রতিবার নাম পরিবর্তন হলে, স্টেটের মান ব্রাউজারের লোকাল স্টোরেজে সংরক্ষিত হয়।