ReactにおけるuseEffectフック

エフェクトを扱うには、フック useEffect が使用されます。その動作を見てみましょう。

まず、フックをインポートします:

import { useEffect } from 'react';

タイトルを含むコンポーネント App を作成しましょう:

function App() {
	return (
		<div>
			<h1>React App</h1>
		</div>
	);
}

export default App;

レンダリング後に何らかのアクション、例えばページ全体の背景色の設定などを行う必要があるとします。この場合、外部システムはブラウザのDOMです。

フックを適用します:

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

第2引数には依存配列が渡されます。そこにはコンポーネントの関数で使用される値が含まれます。今のところ、それは空のままです。この場合、色はレンダリング後に一度だけ緑に設定されます。第2引数を完全に省略することはできません。そうすると、コンポーネントが無限ループに陥る可能性があります。

useEffect フックを使用して、ページのタイトルを変更してください。