Beroenden i useEffect i React

Låt oss nu ändra färgen genom att klicka på en knapp. Vi skapar ett tillstånd color för färgen och sätter ett startvärde:

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

Ersätt strängvärdet med vårt tillstånd i useEffect och glöm inte att lägga till det i beroendelistan inom hakparenteser. Nu kommer effekten att köras varje gång tillståndet color ändras:

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

Låt oss nu lägga till en knapp för att byta färg i vår komponent:

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

Lägg också till en funktion för klickhanteraren, som kommer att ändra vår färg till orange:

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

Det finns ett tillstånd med användarens namn. Gör så att varje gång namnet ändras, värdet på tillståndet skrivs till webbläsarens lokala lagring.