Зависимости в 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');
}