Závislosti v useEffect v Reacte

Teraz budeme meniť farbu kliknutím tlačidla. Vytvoríme stav color pre farbu, nastavením počiatočnej hodnoty:

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

Nahradíme reťazcovú hodnotu naším stavom v useEffect a nezabudnime ho pridať do zoznamu závislostí v hranatých zátvorkách. Teraz sa efekt bude vykonávať každý raz pri zmene stavu color:

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

Pridajme teraz tlačidlo pre zmenu farby do nášho komponentu:

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

Pridajme tiež funkciu obsluhy kliknutia, ktorá bude meniť našu farbu na oranžovú:

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