ReactにおけるuseEffectの依存関係

では、ボタンクリックで色を変えてみましょう。色用のステート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');
}

ユーザー名のステートが与えられています。名前が変更されるたびに、ステートの値がブラウザのローカルストレージに書き込まれるようにしてください。