Avhengigheter i useEffect i React

La oss nå endre fargen ved å klikke på en knapp. Vi oppretter en state color for fargen, og gir den en startverdi:

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

Erstatt strengverdien med vår state i useEffect og ikke glem å legge den til i avhengighetslisten i hakeparentesene. Nå vil effekten kjøre hver gang state color endres:

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

La oss nå legge til en knapp for å endre fargen i komponenten vår:

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

Legg også til en klikk-håndtererfunksjon, som endrer fargen vår til oransje:

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