Глобальные обработчики через 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]);