Odvisnosti v useEffect v Reactu

Zdaj pa spreminjajmo barvo s klikom na gumb. Ustvarimo stanje color za barvo, ki mu določimo začetno vrednost:

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

Zamenjajmo nizno vrednost z našim stanjem v useEffect in ne pozabimo ga dodati na seznam odvisnosti v oglatih oklepajih. Zdaj se bo učinek izvajal vsakič, ko se spremeni stanje color:

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

Zdaj pa dodajmo gumb za spreminjanje barve v našo komponento:

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

Dodajmo tudi funkcijo obdelovalnika klika, ki bo spremenila našo barvo v oranžno:

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