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

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

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

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

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

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

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

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