Afhængigheder i useEffect i React

Lad os nu ændre farven ved at klikke på en knap. Vi opretter en state color for farven og giver den en startværdi:

const [color, setColor] = useState('green');

Erstat strengværdien med vores state i useEffect og glem ikke at tilføje den til afhængighedslisten i de kantede parenteser. Nu vil effekten udføres hver gang state color ændres:

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

Lad os nu tilføje en knap for at skifte farve i vores komponent:

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

Lad os også tilføje en klik-håndteringsfunktion, som vil ændre vores farve til orange:

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

Der er givet en state med brugernavnet. Gør således, at hver gang navnet ændres, bliver værdien af staten gemt i browserens lokale lager.