React-də useEffect-də Asılılıqlar

İndi düyməni kliklədikdə rəngi dəyişək. Rəng üçün color state-ni təyin edək, ona ilkin dəyər verək:

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

useEffect-də sətir dəyərini state-mizlə əvəz edək və onu kvadrat mötərizədə asılılıqlar siyahısına əlavə etməyi unutmayaq. İndi effekt color state-i dəyişdikdə hər dəfə işləyəcək:

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

İndi komponentimizə rəngi dəyişmək üçün düymə əlavə edək:

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

Həmçinin, klik işləyicisi funksiyasını əlavə edək, bizim rəngi narıncı rəngə dəyişəcək:

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