lamechang-dev

Webエンジニア lamechangのブログ。

【React】Effect Hook とclassコンポーネントのライフサイクルメソッドの細かい相違点を整理した

TL;DR

  1. 実行されるタイミングが違う
  2. propsとstateの値の即時性が違う
  3. 関数の中に含まれる機能の純粋度(凝集度)が違う

1. 実行されるタイミングが違う

  • ComponentDidMountコンポーネントがマウントされてレンダリングの内容が仮想DOMからリアルDOMへ反映される前に、ブラウザへの表示をブロックするような前後関係で実行される。

  • useEffect :最初のレンダリングが行われ、その内容がブラウザ反映された直後(一度初期値でレンダリングされた後に、改めて副作用が反映された内容で再レンダリングされる)

useEffect の利点は初回レンダリングまでのレスポンス性の高さになる。アプリのロード時にプレースホルダーの表示などを行いたい場合などに便利。

Hook APIの中には useLayoutEffect と言う、 componentDidMountcomponentDidUpdate と同じタイミングで画面の更新をブロックして実行されるAPIも存在するが、基本的には useEffect と使い、それで描写や挙動に問題がある場合に useLayoutEffect を利用すると安全。

2. propsとstateの値の即時性が違う

クラスコンポーネントでは、負荷のかかる処理を伴うUIなどでは、処理に時間がかかってレンダリングが追いつかない状態でUIを操作すると、props・stateの値が想定外の挙動をすることがある。 が、関数コンポーネントについてはレンダリングのタイミングでpropsstateは不変のため同様の問題は起きない。

3. 関数の中に含まれる機能の純粋度(凝集度)が違う

  • ライフサイクルメソッド :凝縮の単位はコンポーネントのライフサイクルのフェーズに当たる。よってその対応するライフサイクルメソッドがコールされる。時間軸での凝縮度が高く、機能軸での凝縮度が低い。
  • useEffect:凝縮の単位は useEffect() のメソッド単位に当たる。同じ機能が分散して記述されず、一つの useEffect() にまとまったロジックを記述することができ、コンポーネントから切り離して再利用などもしやすい。