React-এ useEffect এর মাধ্যমে গ্লোবাল ইভেন্ট হ্যান্ডলার

ধরুন এখন আমরা চাই যে শুধুমাত্র বাটনে ক্লিক করলেই নয়, বরং কীবোর্ডে Enter চাপলেও রং পরিবর্তন হয়। সাধারণ React-এ window গ্লোবাল অবজেক্টে addEventListener ব্যবহার করে শোনা সম্ভব নয়। এর জন্য আমাদের কাছে ইফেক্ট রয়েছে। আসুন useEffect ব্যবহার করে এই অ্যাকশনটি যোগ করি।

Enter-এ ক্লিক করার জন্য একটি হ্যান্ডলার ফাংশন লিখি। এই ক্ষেত্রে রংটি লালে পরিবর্তিত হোক:

function handleEnter(event) {
	if (event.keyCode === 13) {
		setColor('red');
	}
}

এখন useEffect হুকে window-এ ইভেন্ট লিসেনার বাঁধাই করি:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
}, [color]);

যদি আমাদের কোনো সেটআপ ফাংশন থাকে, তাহলে আমাদের সর্বদা useEffect-এ ক্লিনআপ বা আনসাবস্ক্রাইব কোড রিটার্ন করতে হবে, যাতে ভবিষ্যতে সমস্যা এড়ানো যায়। এই ক্ষেত্রে আমাদের addEventListener সংযুক্ত করার পরে এটিকে মুছে ফেলার কোড রিটার্ন করতে হবে:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
	
	return () => {
		window.removeEventListener('keydown', handleEnter);
	};
}, [color]);

একটি কম্পোনেন্ট দেওয়া আছে। এমন করুন যাতে পৃষ্ঠার যেকোনো জায়গায় ক্লিক করলে এই কম্পোনেন্টের ব্যাকগ্রাউন্ড রং পরিবর্তন করে।

একটি লিঙ্ক তৈরি করুন, যাতে ক্লিক করলে একটি ব্লক প্রদর্শিত হবে। এমন করুন যাতে ব্রাউজার উইন্ডোর যেকোনো জায়গায় ক্লিক করলে আমাদের ব্লকটি লুকিয়ে যায়।