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:

const [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:

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

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

return (
	<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:

function changeColor() {
	setColor('orange');
}

Adott egy felhasználónévvel rendelkező állapot. Úgy állítsa be, hogy minden alkalommal, amikor a név megváltozik, az állapot értéke a böngésző helyi tárolójába íródjon.