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:

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

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

App.jsxuseEffect(() => {
  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:

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