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:

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

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

useEffect(() => {
	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:

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

Se da un componente. Haz que al hacer clic en cualquier lugar de la página el fondo de este componente cambie de color.

Crea un enlace, al hacer clic en el cual aparezca un bloque. Haz que al hacer clic en cualquier lugar de la ventana del navegador nuestro bloque se oculte.