Глабальныя апрацоўшчыкі праз 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]);