はじめに

開発エンジニアのAKIHISAです！
先日鉄フライパンを購入してから料理が楽しくて仕方がありません！
じっくりと油の染みた鉄フライパンに育て上げたいと思います…！！
さて、本題ですが最近個人的にReactの学習をしており、アウトプットとして記事を書きました。
フロントエンドの概念は画面ありきなので、今まで学習していた様なバックエンドのロジックメインの概念とはかなり異なっているので苦戦しています。。。
初めての投稿と言うこともあり文章に拙いところもあるかと思いますが、興味がある方は是非ご覧いただけたらと思います！

今回はReact公式ドキュメントの副作用フックで学習したことをアウトプットしたいと思います。

ライフサイクルメソッド

まず概念を抑えるためにクラスコンポーネントにおけるライフサイクルメソッドを紹介いたします。
そもそもライフサイクルとはどういう意味でしょうか。
広辞苑ではライフサイクルの定義は以下のように記されています。

一方、Reactで言うライフサイクルは、Reactコンポーネントが生成され(Mount)、更新(Update)していく中で最終的にはコンポーネントが削除(Unmount)されるまでのフローのことを表します。
例えば毎秒時刻を更新するコンポーネントをDOMに挿入する場合であれば、各々以下のような挙動となります。

Mount： 画面に現在時刻表示が表示される
Update: 現在時刻の更新が行われる
Unmount: 画面から現在時刻表示が削除される

これをメソッドとして定義したものがライフサイクルメソッドと呼ばれ、以下の3つを主に使用します。

• componentDidMount

  • コンポーネント生成時に一回のみ実行

  • イベントリスナーやAPI通信の接続等の初回設定、DOMに対する処理等の毎回実行するものを記述する

• componentDidUpdate

  • コンポーネント更新時に毎回実行

  • DOMに対する処理等毎回実行するものを記述する

• componentWillUnmount

  • コンポーネント破棄時に実行

  • イベントリスナーやタイマー等の解除、API通信の切断を行う

副作用フック

次に、現在では標準標準となっている、フックから、副作用フックを紹介します。

フックのuseEffectメソッドを使用することにより、上記ライフサイクルメソッドを代替的に実現することができます。
useEffectでは、componentDidMountのようにコンポーネント生成時のみに処理を実行したり、componentDidUpdateのように更新があるたび処理を実行、componentWillUnmmountのようにコンポーネント破棄時に処理を実行したりすることができます。
それでは以下よりuseEffectを使用してみましょう。
まず、ReactからuseEffectをインポートします。

import { useEffect } from 'react';

次にcomponentDidUpdateに対応する、更新時に毎回処理を行う構文を記述します。

useEffect( () => {
    // 毎回実行する処理
});

こちらは画面がレンダリングされる度、useEffectの中身の処理が毎回実行されます。
次にcomponentDidMountに対応する、マウント時に一回だけ処理を行う構文を記述します。

useEffect( () => {
    // 初回のみ実行する処理
}, []);

useEffectの第二引数に空の配列を渡すと、初回のみ処理が実行されます。

最後にcomponentWillUnmountに対応する、アンマウント時にクリーンアップを行うための構文を記述します。

useEffect( () => {
    // 毎回行う処理
    return (
        // クリーンアップ処理
    );
});

アンマウントを行う際に副作用のクリーンアップを行います。
コンポーネントを破棄する時の動作なので、主にメモリの解放処理を行います。
こちらの処理はアンマウント時の他に更新時にも呼ばれます。

まとめ

• ライフサイクルとは、Reactコンポーネントが生成され、更新されていく中で最終的には削除される一連の流れのことを言う。

• フックのuseEffectメソッドではライフサイクルメソッドと同様の処理を一つの関数内で行うことができる。

useEffectはライフサイクルメソッドと比較しても多くの機能を持った関数となりますが、本記事で紹介した内容が基本となります。
参考資料に記載しているサイトではさらに詳しい内容が載っていますので、ぜひご覧ください。

参考資料

• 副作用フックの利用法

• React HooksのuseEffectで関数コンポーネントにライフサイクルを持たせる

• 【React Hooks】ライフサイクルについて