Глобални обработувачи преку useEffect во React

Да претпоставиме дека сега сакаме бојата кај нас да се менува не само при клик на копчето, туку и при притискање на Enter на тастатурата. Во обичен React живот слушањето на глобалниот објект window користејќи addEventListener не е дозволено. За ова ги имаме ефектите. Ајде да го додадеме ова дејство со помош на useEffect.

Да напишеме функција за обработка при клик на Enter. Нека бојата во овој случај се смени во црвена:

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

Сега да го поврземе слушањето на настани со window во hook-от useEffect:

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