react16.8以降、関数コンポーネントでもクラスコンポーネントでも実現出来た、ステート管理、ライフサイクル管理がhooksを使用する事で可能となりました。
本記事はその中でもuseEffectについて紹介したいと思います。
useEffectを用いる事で、classコンポーネントで使用されていた、componentDidMount、componentWillUnmount相当の処理が可能になります。
それではuseEffectの使い方を見ていきましょう。
useEffectの書式
useEffectは以下の書式で利用可能です。
第一引数にcallback
第二引数に処理に依存する引数（配列形式）
を指定します
useEffect(
() => {
処理
return () => {
コンポーネント破棄時に発行する処理
};
},
[メモ化用の依存引数],
);なお、useEffectはコンポーネント内で複数定義可能です。
componentWillMountの代替
useEffectの第二引数に[メモ化用の依存引数]を指定しますが、これを[]として、から配列を渡すことで初期化時にしかuseEffectが発動せず、実質componentWillMount相当の処理が可能となります。
componentWillUnmountの代替
useEffectの第一引数ではコールバック関数を指定しますが、この中でreturnをすることでcomponentWillUnmount相当の処理が可能となります。
returnの中で必要なメソッド等を指定することで、unmount時に処理が実行します。
よくある例としては、setIntervalしたタイマーをclearIntervalするとかですね。
コメント