Dipendenze in useEffect in React

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

App.jsxconst [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:

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

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

App.jsxreturn (
  <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:

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