React-daky useEffect hokunda baglylyklar

Indi basylyş düwmesi bilen reňki üýtgederis. Reňk üçin color ýagdaýyny (state) döredip, ona başlangyç bahany bereliň:

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

useEffect içindäki setir bahasyny ýagdaýymyz bilen çalyşalyň we ony kwadrat ýaýyş içindäki baglylyklar sanawyna goşmagy ýatdan çykarmaly däl. Indi efekt color ýagdaýy her üýtgende işleýär:

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

Indi komponentimize reňk üýtgetmek üçin basylyş düwmesini goşalyň:

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

Şeýle hem, reňkimizi mämişi reňke üýtgetjek klik işleýjisi funksiýasyny goşalyň:

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