React HooksのuseMemo,useEffectの動きを確認する

React Hooksの動きを確認する

　便利だから何となくhooksを使っているという状況なので、実際の動きを確認してみることにしました。

検証用ソースコード

プログラム自体は単純で、チェックボックスを表示するだけのプログラムです。
チェックボックスを押してコンポーネントが再評価される際に、どういう動きをするのかという確認です。

import React, { useMemo, useEffect, useState } from "react";
import * as ReactDOM from "react-dom";

function App() {
  console.log("Function Start");
  useMemo(() => {
    console.log("Memo");
  }, []);
  //パラメータ有りuseEffect
  useEffect(() => {
    console.log("Effect[] Start");
    return () => {
      console.log("Effect[] End");
    };
  }, []);
  //パラメータ無しuseEffect
  useEffect(() => {
    console.log("Effect Start");
    return () => {
      console.log("Effect End");
    };
  });

  const [checked, setChecked] = useState(false);
  console.log("Function End");
  return (
    <>
      <input
        type="checkbox"
        checked={checked}
        onChange={e => {
          console.log("Check");
          setChecked(e.target.checked);
        }}
      />
    </>
  );
}
ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);

検証結果

• ページ表示直後
  Function Start
  Memo
  Function End
  Effect[] Start
  Effect Start

• チェックボックスを押した後
  Function Start
  Function End
  Effect End
  Effect Start

所感

　useMemoは作成直後に一回だけ呼ばれるため、本来の使い方ではありませんが、classコンポーネント移植時、コンストラクタでやっていた処理の代替で使えそうです。

　また、実際にやってみてよく分かっていなかったのは「Effect End」のタイミングです。前回のEffectを終了させてから再び開始されます。表示中の処理を行う箇所なのだから、確かにその動作が適切なわけです。

　hooksを使うと小さなコンポーネントを作る場合は、非常に手軽に使えるので重宝します。しかし重量級のコンポーネントの作成などは、classを使ってstateやプロパティを定義した方が使いやすい場合もあります。今後も適材適所でバランス良く使っていこうと思います。