Dependências no useEffect em React

Agora vamos mudar a cor ao clicar em um botão. Vamos criar um estado color para a cor, definindo um valor inicial:

App.jsxconst [color, setColor] = useState('green');

Vamos substituir o valor de string pelo nosso estado em useEffect e não esquecer de adicioná-lo à lista de dependências entre colchetes. Agora o efeito será executado toda vez que o estado color for alterado:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = color;
  }, [color]);
  
  ...
}

Agora vamos adicionar um botão para mudar a cor no nosso componente:

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

Vamos adicionar também a função manipuladora do clique, que mudará nossa cor para laranja:

App.jsxfunction changeColor() {
  setColor('orange');
}