Dépendances dans useEffect dans React

Maintenant, changeons la couleur au clic d'un bouton. Créons un état color pour la couleur, en lui donnant une valeur initiale :

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

Remplaçons la valeur de chaîne par notre état dans useEffect et n'oublions pas de l'ajouter à la liste des dépendances entre crochets. Maintenant l'effet s'exécutera à chaque fois que l'état color changera :

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

Ajoutons maintenant un bouton pour changer la couleur dans notre composant :

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

Ajoutons également la fonction gestionnaire du clic, qui changera notre couleur en orange :

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

Un état avec le nom d'utilisateur est donné. Faites en sorte qu'à chaque fois que le nom change, la valeur de l'état soit enregistrée dans le stockage local du navigateur.