Zależności w useEffect w React

Teraz zmieniajmy kolor po kliknięciu przycisku. Stwórzmy stan color dla koloru, ustawiając mu początkową wartość:

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

Zamieńmy wartość tekstową na nasz stan w useEffect i nie zapomnijmy dodać go do listy zależności w nawiasach kwadratowych. Teraz efekt będzie wykonywany za każdym razem przy zmianie stanu color:

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

Dodajmy teraz przycisk do zmiany koloru w naszym komponencie:

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

Dodajmy również funkcję obsługi kliknięcia, która będzie zmieniać nasz kolor na pomarańczowy:

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