ライフサイクルとは
Reactコンポーネントが生成→更新→削除されるフローのことをライフサイクルと言います。
Reactではこれらの各過程を下記のように呼びます。
| 過程 | 呼び方 |
|---|---|
| 生成 | mount |
| 更新 | update |
| 削除 | unmount |
ライフサイクルメソッドとは
Reactではライフサイクルの各過程において実行されるメソッドが用意されており、これをライフサイクルメソッドといいます。ライフサイクルメソッドをオーバーライドすることで、特定の処理を特定の時点で実行することができます。
各時点で実行される代表的なライフサイクルメソッドがまとめられたチートシートがReact公式で用意されています。
これらのライフサイクルメソッドはクラスコンポーネントです。
useEffectとは
下記ライフサイクルメソッドをクラスコンポーネントではなく関数コンポーネントの中でまとめて実現できる機能です。
- componentDidMount (コンポーネントのマウント直後に呼び出される)
- componentDidUpdate (setStateuでコンポーネントの値が更新された後に呼び出される)
- componentWillUnmount (コンポーネントがアンマウントされて破棄される直前に呼び出される)
useEffectはレンダリング後と再レンダリングされたときに呼び出されます。
useEffectの使い方
useEffectは下記のように記述します。
useEffect(() => {
//第一引数
//ここに記述した処理はレンダリング後に実行される(初回のレンダリング後に必ず実行)
return () => {
// クリーンアップ(アンマウント直前)の処理
// 記述は任意
}
},
// 第二引数
// この配列内の変数に変化があった場合のみuseEffectを実行する
// 空の配列の場合は初回レンダリング後のみ実行
[変数1, 変数2, …]
)
参考資料
【React】useEffectの基本的な使い方・活用術・注意点