Dependințe în useEffect în React

Acum să schimbăm culoarea la click buton. Vom crea o stare color pentru culoare, stabilind o valoare inițială:

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

Vom înlocui valoarea string cu starea noastră în useEffect și nu vom uita să o adăugăm în lista de dependințe în paranteze pătrate. Acum efectul se va executa de fiecare dată când starea color se schimbă:

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

Acum să adăugăm un buton pentru schimbarea culorii în componenta noastră:

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

Să adăugăm și funcția de handler pentru click, care va schimba culoarea noastră în portocaliu:

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