Dependencias en useEffect en React

Ahora vamos a cambiar el color al hacer clic en un botón. Creemos un estado color para el color, estableciendo un valor inicial:

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

Reemplacemos el valor de cadena con nuestro estado en useEffect y no olvidemos agregarlo a la lista de dependencias entre corchetes. Ahora el efecto se ejecutará cada vez que cambie el estado color:

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

Ahora agreguemos un botón para cambiar el color en nuestro componente:

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

Agreguemos también la función manejadora del clic, que cambiará nuestro color a naranja:

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

Se da un estado con el nombre de usuario. Hagan que cada vez que cambie el nombre, el valor del estado se guarde en el almacenamiento local del navegador.