hooks時代のreact 〜useEffect編〜

React

react16.8以降、関数コンポーネントでもクラスコンポーネントでも実現出来た、ステート管理、ライフサイクル管理がhooksを使用する事で可能となりました。

本記事はその中でもuseEffectについて紹介したいと思います。

useEffectを用いる事で、classコンポーネントで使用されていた、componentDidMountcomponentWillUnmount相当の処理が可能になります。

それではuseEffectの使い方を見ていきましょう。

useEffectの書式

useEffectは以下の書式で利用可能です。

第一引数にcallback

第二引数に処理に依存する引数(配列形式)

を指定します

useEffect(
  () => {
    処理
    return () => {
      コンポーネント破棄時に発行する処理
    };
  },
  [メモ化用の依存引数],
);

なお、useEffectはコンポーネント内で複数定義可能です。

componentWillMountの代替

useEffectの第二引数に[メモ化用の依存引数]を指定しますが、これを[]として、から配列を渡すことで初期化時にしかuseEffectが発動せず、実質componentWillMount相当の処理が可能となります。

componentWillUnmountの代替

useEffectの第一引数ではコールバック関数を指定しますが、この中でreturnをすることでcomponentWillUnmount相当の処理が可能となります。
returnの中で必要なメソッド等を指定することで、unmount時に処理が実行します。
よくある例としては、setIntervalしたタイマーをclearIntervalするとかですね。

コメント