Залежнасці ў 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');
}