Gestori globali tramite useEffect in React

Supponiamo ora che vogliamo che il colore cambi non solo cliccando sul pulsante, ma anche premendo Enter sulla tastiera. Nella normale vita React non possiamo ascoltare l'oggetto globale window usando addEventListener. Per questo abbiamo gli effetti. Aggiungiamo questa azione usando useEffect.

Scriviamo una funzione di gestione per il click su Enter. Lasciamo che il colore in questo caso cambi in rosso:

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

Colleghiamo ora l'ascolto degli eventi a window nel hook useEffect:

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

Se abbiamo una qualche funzione di impostazione, dobbiamo sempre restituire nel useEffect il codice di pulizia o annullamento dell'iscrizione, per evitare problemi in futuro. In questo caso, dopo aver aggiunto addEventListener, dobbiamo restituire la sua rimozione:

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