Dipendenze in useEffect in React

Ora cambiamo il colore cliccando un pulsante. Creiamo uno stato color per il colore, impostando un valore iniziale:

const [color, setColor] = useState('green');

Sostituiamo il valore stringa con il nostro stato in useEffect e non dimentichiamo di aggiungerlo alla lista delle dipendenze tra parentesi quadre. Ora l'effetto verrà eseguito ogni volta che lo stato color cambia:

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

Ora aggiungiamo un pulsante per cambiare il colore nel nostro componente:

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

Aggiungiamo anche la funzione gestore del click, che cambierà il nostro colore in arancione:

function changeColor() {
	setColor('orange');
}

È dato uno stato con il nome utente. Fate in modo che ogni volta che il nome cambia, il valore dello stato venga salvato nella memoria locale del browser.