Зависимости в useEffect в React

Сега нека променяме цвета при натискане на бутон. Ще създадем състояние color за цвета, като му зададем начална стойност:

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

Заменяме стойността на низа с нашето състояние в useEffect и не забравяме да го добавим в списъка с зависимости в квадратните скоби. Сега ефектът ще се изпълнява всеки път при промяна на състоянието color:

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

Сега нека добавим бутон за промяна на цвета в нашия компонент:

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

Добавяме и функция за обработка на кликването, която ще променя цвета ни на оранжево:

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