Sõltuvused useEffect-is React-is

Nüüd muudame värvi nupu vajutamisega. Loome oleku color värvi jaoks, andes sellele algväärtuse:

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

Asendame stringi väärtuse meie olekuga useEffect-is ja ärgem unustagem lisada seda sõltuvuste loendisse nurksulgudes. Nüüd käivitatakse efekt iga kord kui olek color muutub:

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

Nüüd lisame nupu värvi muutmiseks meie komponenti:

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

Lisame ka kliki käitleja funktsiooni, mis muudab meie värvi oranžiks:

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