Manipuladores Globais com useEffect no React

Suponha que agora queremos que a cor mude não apenas ao clicar no botão, mas também ao pressionar Enter no teclado. Na vida React normal, não é permitido escutar o objeto global window usando addEventListener. Para isso, temos os efeitos. Vamos adicionar esta ação usando useEffect.

Vamos escrever a função manipuladora para o clique em Enter. Deixe a cor mudar para vermelho neste caso:

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

Agora, vamos vincular a escuta de eventos à window no hook useEffect:

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

Se temos alguma função de configuração, sempre precisamos retornar um código de limpeza ou cancelamento no useEffect para evitar problemas no futuro. Neste caso, após anexar o addEventListener, precisamos retornar sua remoção:

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

É dado um componente. Faça com que ao clicar em qualquer lugar da página, o fundo deste componente mude de cor.

Crie um link, ao clicar no qual um bloco aparecerá. Faça com que ao clicar em qualquer lugar da janela do navegador, nosso bloco seja ocultado.