TechDive Blog

1. useMemoとは？

useMemo は、重い計算処理を効率化するための React のフックです。

通常、コンポーネントが再レンダリングされるたびに計算処理が実行されますが、useMemo を使うと必要なときだけ計算を実行できます。

これにより、パフォーマンスが向上し、画面の動作がスムーズになります。

似た概念にuseCallbackがありますが、こちらは関数自体を保持します。

2. useMemoの基本構文

useMemoは、以下のような構文で記述できます。

const cachedValue = useMemo(calculateValue, dependencies)

cachedValue：保存された計算結果
calculateValue：保存したい結果を算出する関数
dependencies：依存配列
- 空の場合：一回だけ実行
- 空でない場合：依存配列内の変数が変わったときに再実行、再計算

3. サンプルコード

サンプルコードは下記です。 otherValueが変化したときだけ重い計算処理を再計算します。 useMemoで定義される計算は以下の計算になります。

a. Array.from({length:1000000}, (_, i) => i + otherValue)
	i. 長さが 1,000,000（=100万）の配列を作成します。
	ii. 上記の配列のindex番号を配列化して各要素にotherValueを足します。
	ex) otherValue = 5の時、[0 + 5, 1 + 5, 2 + 5, ..., 999999 + 5]
b. .reduce((a, b) => a + b, 0)
	i. 上記の配列内のすべての要素を加算して合計を求めます。

import { useMemo, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [otherValue, setOtherValue] = useState(0);

  const result = useMemo(() => {
    console.log("calculate values!", otherValue);
    return Array.from({ length: 1000000 }, (_, i) => i + otherValue).reduce(
      (a, b) => a + b,
      0
    );
  }, [otherValue]);
  return (
    <div>
      <p>Result: {result}</p>
      <p>Count: {count}</p>
      <p>OtherValue: {otherValue}</p>
      <button onClick={() => setCount(count + 1)}>Countの変更</button>
      <button onClick={() => setOtherValue(otherValue + 1)}>
        OtherValueの変更
      </button>
    </div>
  );
}

[解説]

count と otherValue の管理 useState を使って 2 つの状態変数を管理しています。

Count：ボタンを押すと値が 1 増えます。
OtherValue：ボタンを押すと値が 1 増え、計算結果に影響を与えます。

useMemo による計算効率化 Array.from と reduce を使った計算が、otherValue が変わったときだけ実行されます。

配列の長さは 1,000,000 個。
配列の要素は [0 + otherValue, 1 + otherValue, ..., 999999 + otherValue]。
配列のすべての値を合計します。

効率化のポイント

otherValue が変化しない限り、計算は再実行されません。
count を変更しても useMemo の計算は無視され、動作が速くなります

実際の画面については、以下のプレビュー参照

もしプレビューが表示されていない場合は以下の手順で表示

コマンドパレットを開く(mac: Shift+command+P, win: Shift+Ctl+P) > 「Open Preview」と入力 > 「CodeSandBox: Open Preview」を選択