Globalni obdelovalci prek useEffect v Reactu

Recimo, da zdaj želimo, da se barva spremeni ne le ob kliku na gumb, temveč tudi ob pritisku tipke Enter na tipkovnici. V običajnem React razvoju ne moremo neposredno poslušati globalnega objekta window z uporabo addEventListener. Za to imamo efekte. Dodajmo to funkcionalnost s pomočjo useEffect.

Napišimo funkcijo obdelovalca za pritisk tipke Enter. Naj se barva v tem primeru spremeni v rdečo:

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

Povežimo zdaj poslušanje dogodkov na window v hooku useEffect:

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
}, [color]);

Če imamo kakšno nastavitveno funkcijo, moramo vedno v useEffect vrniti kodo za čiščenje ali odjavo, da se izognemo težavam v prihodnosti. V tem primeru moramo po dodajanju addEventListener vrniti njegovo odstranjevanje:

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
  
  return () => {
    window.removeEventListener('keydown', handleEnter);
  };
}, [color]);