Varësitë në useEffect në React

Tani le të ndryshojmë ngjyrën duke klikuar butonin. Le të krijojmë një state color për ngjyrën, duke i caktuar një vlerë fillestare:

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

Le të zëvendësojmë vlerën e stringut me state-in tonë në useEffect dhe të mos harrojmë ta shtojmë atë në listën e varësive në kllapat katrore. Tani efekti do të ekzekutohet çdo herë kur state-i color ndryshon:

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

Tani le të shtojmë një buton për ndryshimin e ngjyrës në komponentin tonë:

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

Le të shtojmë gjithashtu funksionin e trajtuesit të klikut, i cili do të ndryshojë ngjyrën tonë në portokalli:

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