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:
const [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:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Agora vamos adicionar um botão para mudar a cor no nosso componente:
return (
<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:
function changeColor() {
setColor('orange');
}
É dado um estado com o nome de usuário. Faça com que toda vez que o nome for alterado, o valor do estado seja salvo no armazenamento local do navegador.
