Globalne obsługi za pomocą useEffect w React

Załóżmy, że teraz chcemy, aby kolor zmieniał się nie tylko po kliknięciu przycisku, ale także po naciśnięciu Enter na klawiaturze. W zwykłym życiu React nasłuchiwanie na globalnym obiekcie window używając addEventListener jest niedozwolone. Do tego mamy efekty. Dodajmy tę akcję za pomocą useEffect.

Napiszmy funkcję obsługi po kliknięciu Enter. Niech kolor w tym przypadku zmieni się na czerwony:

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

Przywiążmy teraz nasłuchiwanie zdarzeń do window w hooku useEffect:

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

Jeśli mamy jakąś funkcję konfiguracyjną, to zawsze musimy w useEffect zwrócić kod czyszczący lub anulujący subskrypcję, aby uniknąć problemów w przyszłości. W tym przypadku po dołączeniu addEventListener musimy zwrócić jego usunięcie:

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