Beroenden i useEffect i React

Låt oss nu ändra färgen genom att klicka på en knapp. Vi skapar ett tillstånd color för färgen och sätter ett startvärde:

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

Ersätt strängvärdet med vårt tillstånd i useEffect och glöm inte att lägga till det i beroendelistan inom hakparenteser. Nu kommer effekten att köras varje gång tillståndet color ändras:

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

Låt oss nu lägga till en knapp för att byta färg i vår komponent:

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

Lägg också till en funktion för klickhanteraren, som kommer att ändra vår färg till orange:

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