Manejadores globales con useEffect en React

Supongamos que ahora queremos que el color cambie no solo al hacer clic en el botón, sino también al presionar Enter en el teclado. En la vida normal de React no se puede escuchar el objeto global window usando addEventListener. Para esto tenemos los efectos. Vamos a agregar esta acción usando useEffect.

Escribamos la función manejadora para el clic en Enter. Que el color cambie a rojo en este caso:

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

Ahora vinculemos la escucha de eventos a window en el hook useEffect:

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

Si tenemos alguna función de configuración, siempre necesitamos retornar en useEffect el código de limpieza o cancelación de suscripción, para evitar problemas en el futuro. En este caso, después de agregar addEventListener necesitamos retornar su eliminación:

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