Závislosti v useEffect v Reactu

Nyní budeme měnit barvu po kliknutí na tlačítko. Vytvoříme stav color pro barvu, a nastavíme mu počáteční hodnotu:

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

Nahradíme řetězcovou hodnotu naším stavem v useEffect a nezapomeneme jej přidat do seznamu závislostí v hranatých závorkách. Nyní se efekt bude spouštět pokaždé při změně stavu color:

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

Nyní přidáme tlačítko pro změnu barvy do naší komponenty:

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

Přidáme také funkci obsluhy kliknutí, která změní naši barvu na oranžovou:

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