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]);