Խախտումներ useEffect-ում React-ում

Հիմա եկեք փոխենք գույնը կոճակի սեղմումով: Ստեղծենք color state գույնի համար՝ տալով նրան սկզբնական արժեք:

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

Փոխարինենք տողային արժեքը մեր state-ով useEffect-ում և չմոռանանք ավելացնել այն կախվածությունների ցուցակում քառակուսի փակագծերում: Հիմա էֆեկտը կկատարվի ամեն անգամ, երբ color state-ը փոխվի:

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');
}