Зависимости в useEffect в React

Теперь давайте будем менять цвет по нажатию кнопки. Заведем стейт color для цвета, задав ему начальное значение:

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

Заменим строковое значение на наш стейт в useEffect и не забудем добавить его в список зависимостей в квадратных скобках. Теперь эффект будет выполняться каждый раз при изменении стейта color:

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

Давайте теперь добавим кнопку для смены цвета в наш компонент:

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

Добавим также функцию обработчика клика, которая будет менять наш цвет на оранжевый:

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

Дан стейт с именем пользователя. Сделайте так, чтобы каждый раз при изменении имени, значение стейта записывалось в локальное хранилище браузера.