Afhankelijkheden in useEffect in React

Laten we nu de kleur veranderen door op een knop te klikken. We maken een state color voor de kleur, en geven het een beginwaarde:

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

Vervang de stringwaarde door onze state in useEffect en vergeet niet om het toe te voegen aan de afhankelijkheidslijst tussen de vierkante haken. Nu zal het effect elke keer worden uitgevoerd wanneer de state color verandert:

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

Laten we nu een knop toevoegen om de kleur te veranderen in onze component:

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

We voegen ook een klik-handlerfunctie toe, die onze kleur zal veranderen in oranje:

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

Er is een state met een gebruikersnaam. Zorg ervoor dat elke keer wanneer de naam verandert, de waarde van de state wordt opgeslagen in de lokale opslag van de browser.