Függőségek a useEffect-ben Reactben

Most változtassuk meg a színt egy gomb megnyomására. Hozzunk létre egy color állapotot a színnek, kezdeti értéket megadva:

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

Cseréljük le a string értéket a mi állapotunkra a useEffect-ben, és ne felejtsük el hozzáadni a függőségi listához a szögletes zárójelek között. Most a hatás minden alkalommal végrehajtódik, amikor a color állapot megváltozik:

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

Most adjunk hozzá egy gombot a szín váltásához a komponensünkbe:

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

Adjunk hozzá egy kattintáskezelő függvényt is, ami a színünket narancsra változtatja:

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