Глобални обработчици чрез useEffect в React

Да предположим, че сега искаме цветът да се променя не само при кликване върху бутона, но и при натискане на Enter на клавиатурата. В обичайния React живот да слушаме за глобалния обект window използвайки addEventListener не е позволено. За това имаме ефекти. Нека добавим това действие с помощта на useEffect.

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

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

Нека сега свържем слушането за събития към window в хука 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]);