【React】 useEffect()とは

useEffect()とはずばり、「副作用を実行し、制御するもの」です。

そもそも副作用とは？

UI構築以外の処理をさしています。

具体的には以下となります。
・Reactの管理外でDOMを更新する処理
・APIとの非同期通信などのデータ取得
・サブスクリプション購買の設定

副作用の実行

UI構築後に行われる処理。

useEffect()による副作用の実行タイミングは、ブラウザが描画し終えるまで遅延されます。

useEffect()の第一引数に渡されるコールバック関数は副作用関数とよばれます。

副作用の制御

useEffect()の第二引数に渡される依存配列によって、副作用関数の実行タイミングを制御することができます。

Reactが第二引数の依存配列の中身の値を比較して、副作用関数実行をスキップするかどうかを判断します。

使い方

const callbackFunc = () => console.log(`side-feect function has been executed!`);

useEffect(calllbackFunc, [依存する変数の配列])

第一引数は副作用関数で、もどり値はクリーンアップ関数、または何も返しません。

第二引数は、副作用関数の実行タイミングを制御する依存配列です。

この第二引数を[]と空の配列にすると、初回レンダリング時のみ副作用関数が実行されます。

第二引数を省略することもでき、コンポーネントがレンダリングされるたびに副作用関数が実行されます。

しかし、無限ループの温床になりやすいため、省略するケースはほとんどありません。

クリーンアップ関数とは

副作用関数から返された関数をクリーンアップ関数といいます。

たとえばタイマーのキャンセルや、イベントリスナの削除など。

コンポーネントがレンダリングされるたびにイベントが重複されるので、マウント時に実行した処理をアンマウント時に削除する処理が必要となります。

const callbackFunc = () => {
	console.log(`callback function is executed!`);
	return () => {
		alert(`cleanup function is executed!`);
	}
}

useEffect(callbackFunc, [])

コンポーネントのレンダリングとは

関数コンポーネントのレンダリングは次のタイミングで行われます。

・コンポーネントの初回レンダリング時
・親コンポーネントがレンダリングされたとき（すべての子コンポーネントは無条件にレンダリングされます）
・コンポーネント内で定義されたuseState()の状態変数/現在の値に変化があったとき
・カスタムフックからコンポーネントが受け取っている変数が変かしたとき

Reactがレンダリングを行うのは、変更前と変更後の仮想DOMを構築して、変更差分を検出するためです。

そして、リアルDOMを構築する必要があるかどうかを知ります。