Atkarības useEffect React

Tagad mainīsim krāsu, noklikšķinot uz pogas. Izveidosim stāvokli color krāsai, iestatot tam sākotnējo vērtību:

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

Aizstāsim virknes vērtību ar mūsu stāvokli useEffect un neaizmirsīsim to pievienot atkarību sarakstā kvadrātiekavās. Tagad efekts tiks izpildīts katru reizi, mainoties stāvoklim color:

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

Tagad pievienosim pogu krāsas maiņai mūsu komponentā:

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

Pievienosim arī klikšķa apstrādātāja funkciju, kas mainīs mūsu krāsu uz oranžu:

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