useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• リファレンス
  • useMemo(calculateValue, dependencies)
• 使用法
  • 高コストな再計算を避ける
  • コンポーネントの再レンダーをスキップする
  • 他のフックの依存値をメモ化する
  • 関数をメモ化する
• トラブルシューティング
  • 再レンダーのたびに計算が 2 回実行される
  • useMemo の返り値が、オブジェクトではなく undefined になってしまう
  • コンポーネントがレンダーされるたびに、useMemo 内の関数が再実行される
  • ループ内のリストの各項目について useMemo を呼び出したいが、禁止されている

リファレンス

useMemo(calculateValue, dependencies)

コンポーネントのトップレベルで useMemo を呼び出して、レンダー間で計算をキャッシュします。

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

さらに例を見る

引数

• calculateValue: キャッシュしたい値を計算する関数。純関数で、引数を取らず、任意の型の値を返すことができます。React は初回レンダー中にこの関数を呼び出します。次回以降のレンダーでは、直前のレンダーと dependencies が変化していなければ、同じ値を再度返します。dependencies が変化していれば、calculateValue を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。

• dependencies: calculateValue のコード内で参照されているすべてのリアクティブ値の配列。リアクティブ値には、props、state、およびコンポーネント本体で直接宣言されているすべての変数と関数が含まれます。リンタが React 向けに設定されている場合は、すべてのリアクティブ値が正しく依存値として指定されているかを確認します。依存配列は、[dep1、dep2、dep3] のようにインラインで記述され、配列の長さは一定である必要があります。各依存値は、Object.is を用いて、前回の値と比較されます。

返り値

初回のレンダーでは、引数なしで calculateValue を呼び出した結果が、useMemo の返り値となります。

次回以降のレンダーでは、依存関係が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、calculateValue を再度呼び出し、その結果をそのまま返します。

注意点

• useMemo はフックなので、カスタムフックかコンポーネントのトップレベルでしか呼び出すことができません。ループや条件分岐の中で呼び出すことはできません。もしループや条件分岐の中で呼び出したい場合は、新しいコンポーネントに切り出して、その中に state を移動させてください。
• Strict Mode では、純粋でない関数を見つけやすくするために、計算関数 (calculateValue) が 2 度呼び出されます。これは、開発時のみの挙動で、本番では影響は与えません。もし、計算関数が純粋であれば（純粋であるべきです）、2 回呼び出されてもコードに影響はありません。2 回の呼び出しのうち、一方の呼び出し結果は無視されます。
• 特別な理由がない限り、キャッシュ値が破棄されることはありません。破棄されるケースは、例えば、開発時にコンポーネントのファイルを編集すると、キャッシュが破棄されます。また、開発時および本番時に、初回マウント中にコンポーネントがサスペンドすると、キャッシュは破棄されます。将来的には、キャッシュが破棄されることを前提とした機能が React に追加される可能性があります。例えば、将来的に仮想リストが組み込みでサポートされた場合、仮想テーブルのビューポートからスクロールアウトした項目は、キャッシュを破棄するようになるかもしれません。このような挙動は、パフォーマンス最適化のみを目的として useMemo を使っている場合には問題ありません。しかし、他の目的で利用している場合は、state 変数 や ref を利用した方が良いかもしれません。

使用法

高コストな再計算を避ける

複数レンダーを跨いで計算をキャッシュするには、コンポーネントのトップレベルで useMemo を呼び出し、計算をラップします。

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

useMemo には、2 つの引数を渡す必要があります。

1. () => のように、引数を取らず、求めたい計算結果を返す計算関数
2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、依存配列

初回レンダーでは、useMemo から返される値は、計算関数を呼び出した結果になります。

次回以降のレンダーでは、今回のレンダー時に渡した依存配列と、前回のレンダー時に渡した依存配列が比較されます。（Object.is で比較します。）依存配列のいずれも変化していない場合、useMemo は以前に計算した値を返します。変化している場合は、再度計算が実行され、新しい値が返されます。

つまり useMemo は、依存配列が変化しない限り、複数のレンダーを跨いで計算結果をキャッシュします。

これが役に立つ場面を見てみましょう。

React では通常、再レンダーが発生するたびに、コンポーネント関数全体が再実行されます。例えば、以下の TodoList で、state が更新されたり、親から新しい props を受け取ったりした場合、filterTodos 関数が再実行されます。

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

通常、これらの計算は非常に高速に処理されるため、何か問題になることはありません。しかし、巨大な配列をフィルタリング・変換している場合や、高コストな計算を行っている場合には、データが変わっていなければこれらの計算をスキップしたくなるでしょう。todos と tab の値が前回のレンダー時と同じ場合、先ほどのように計算を useMemo でラップすることで、以前に計算した visibleTodos を再利用することができるのです。

このようなキャッシュのことを、memoization （メモ化） と呼びます。

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // Skipped if todos and tab haven't changed
}, [todos, tab]);
console.timeEnd('filter array');

コンポーネントの再レンダーをスキップする

useMemo は、子コンポーネントの再レンダーのパフォーマンスを最適化するために役に立つことがあります。これを説明するために、TodoList コンポーネントが、子コンポーネントの List の props として、visibleTodos を渡すことを考えます。

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

私たちは、theme props を変化させると、一時的にアプリがフリーズすることを確認しました。しかし、<List /> を JSX から削除すると、高速に動作するように見えます。

通常、あるコンポーネントが再レンダーされたときは、その子コンポーネントも全て再レンダーされます。これが、TodoList が異なる theme の値で再レンダーされたとき、List コンポーネントも一緒に再レンダーされる理由です。この動作は、再レンダーにそれほど多くの計算コストを必要としないコンポーネントには適しています。しかし、もし再レンダーが遅いと分かった場合は、List コンポーネントを memo で囲いましょう。すると、与えられた props が前回のレンダーと同じであれば、List の再レンダーをスキップすることができます。

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

この変更によって、props の全項目が前回のレンダーと等しい場合には、List の再レンダーはスキップされるようになります。これが、計算のキャッシュが重要になる理由です！ useMemo を使わずに visibleTodos の計算を行うことを想像してみてください。

export default function TodoList({ todos, tab, theme }) {
  // これは、theme が変化するたびに新しい配列になる...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... そのため、List の props が同じ値になることはなく、毎回再レンダーされることになる */}
      <List items={visibleTodos} />
    </div>
  );
}

上記の例では、filterTodos 関数が毎回異なる配列を生成します。（これは、{} というオブジェクトリテラルが、毎回新しいオブジェクトを生成することと似ています。）通常これが問題になることはありませんが、今回の場合は、List の props が毎回別の値になってしまいます。そのため、memo による最適化が意味をなさなくなってしまうのです。ここで、useMemo が役に立ちます。

export default function TodoList({ todos, tab, theme }) {
  // Reactに、再レンダー間で計算結果をキャッシュするように伝えます、...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...これらの依存値が変化しない限りは。
  );
  return (
    <div className={theme}>
      {/* ... List は同じ props を受け取り、再レンダーをスキップします */}
      <List items={visibleTodos} />
    </div>
  );
}

visibleTodos の計算を useMemo でラップすることで、複数の再レンダーの間でその結果が同じになることを保証できます（依存配列が変わらない限り）。通常、特別な理由がなければ、計算を useMemo でラップする必要はありません。この例では、memo で囲われたコンポーネントに値を渡していることが、その特別な理由にあたります。他にも useMemo を追加する動機はいくつかあり、このページで詳しく解説していきます。

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

他のフックの依存値をメモ化する

ある計算が、コンポーネントの本体で直接作成されたオブジェクトに依存しているとしましょう。

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // 🚩 注意: コンポーネントの本体で作成されたオブジェクトへの依存値
  // ...

このようなオブジェクトに依存してしまうと、メモ化がうまく働きません。コンポーネントが再レンダーされたとき、コンポーネントの本体に含まれるコードは全て再実行されます。searchOptions オブジェクトを作成するコードも、毎回再実行されます。searchOptions は useMemo の依存値であり、毎回異なる値となるため、依存値が変化したと判断され、searchItems が毎回再計算されます。

これを修正するには、searchOptions オブジェクトを依存配列に渡す前に、searchOptions オブジェクト自体をメモ化しましょう。

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ text が変化したときだけ更新される

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ allItems か searchOptions が変化したときだけ更新される
  // ...

上記の例では、text が変化しなければ、searchOptions オブジェクトも変化しません。しかし、さらに良い修正方法として、searchOptions オブジェクトの宣言を useMemo の計算関数の中に移動する方法があります。

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ allItems か text が変化したときだけ更新される
  // ...

これで、計算が直接 text に依存するようになりました。（text は文字列であり、“意図せず” 変化することはありません。）

関数をメモ化する

Form コンポーネントが memo でラップされているとします。関数を props として渡してみましょう。

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

{} が異なるオブジェクトを生成するように、function() {} のような関数宣言や、() => {} のような関数式もまた、レンダーごとに異なる関数を生成します。新しい関数が生成されること自体は問題ではなく、避けるべきことでもありません。しかし、Form コンポーネントがメモ化されている状況では、Form の props に渡す値が変わっていない場合は Form の再レンダーをスキップしたいと考えるでしょう。props に渡す値が毎回異なってしまえば、メモ化は無意味になってしまいます。

useMemo で関数をメモ化する場合は、計算関数がさらに別の関数を返す必要があります。

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

なんだか不恰好ですね！ 関数のメモ化はよくあるケースなので、そのための組み込みフックが提供されています。余計な関数の入れ子を避けるには、useMemo の代わりに useCallback で関数をラップしましょう。

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

上記の 2 つの例は完全に等価です。useCallback のメリットは、余計な関数の入れ子が不要になるだけです。それ以外の違いは何もありません。useCallback についての詳細は、こちらを参照してください。

トラブルシューティング

再レンダーのたびに計算が 2 回実行される

Strict Mode では、本来 1 回だけ関数が呼び出されるところで、2 回呼び出されることがあります。

function TodoList({ todos, tab }) {
  // このコンポーネント関数は、レンダーごとに 2 回実行されます。

  const visibleTodos = useMemo(() => {
    // この計算は、依存値のいずれかが変化した場合に 2 回実行されます。
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

これは想定通りの挙動であり、あなたのコードのロジックを壊すことはありません。

これは開発時のみの挙動で、開発者がコンポーネントを純粋に保つために役立ちます。呼び出し結果のうちの 1 つが採用され、もう 1 つは無視されます。あなたが実装したコンポーネントと計算関数が純粋であれば、この挙動がロジックに影響を与えることはありません。しかし、もし意図せず純粋ではない関数になっていた場合は、この挙動によって間違いに気づき、修正することができます。

たとえば、以下の計算関数は、props として受け取った配列を変更してしまっており、純粋ではありません。

  const visibleTodos = useMemo(() => {
    // 🚩 Mistake: mutating a prop
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

しかし、この関数は 2 度呼び出されるため、todo が 2 回追加されたことに気づくはずです。計算関数は、既存のオブジェクトを変更してはいけませんが、計算中に作成した新しいオブジェクトを変更することは問題ありません。たとえば、filterTodos 関数が常に異なる配列を返す場合は、その配列を変更しても問題ありません。

  const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ 正しい: 計算中に作成したオブジェクトを変更している
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

純粋性について詳しく知るには、コンポーネントを純粋に保つを参照してください。

また、ミューテーションなしでオブジェクトを更新する方法についてはオブジェクトの更新を、ミューテーションなしで配列を更新する方法については配列の更新を参照してください。

useMemo の返り値が、オブジェクトではなく undefined になってしまう

以下のコードはうまく動作しません。

  // 🔴 アロー関数からオブジェクトを返すには、`() => {` は利用できない
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

JavaScript では、() => { というコードでアロー関数の本体を開始するため、{ の波括弧はオブジェクトの一部にはなりません。したがってオブジェクトは返されず、ミスにつながります。({ や }) のように丸括弧を追加することで修正できます。

  // これは正しく動作しますが、誰かがまた壊してしまう可能性がある
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

しかし、これでもまだ混乱しやすく、誰かが丸括弧を削除してしまうと簡単に壊れてしまいます。

このミスを避けるために、明示的に return 文を書きましょう。

  // ✅ これは正しく動作し、明示的に書かれている
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

コンポーネントがレンダーされるたびに、useMemo 内の関数が再実行される

第 2 引数に依存配列を指定しているか確認してください！

依存配列を忘れると、useMemo は毎回計算を再実行してしまいます。

function TodoList({ todos, tab }) {
  // 🔴 依存配列がない場合、毎回再計算を行う
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

第 2 引数に依存配列を渡した修正版は以下の通りです。

function TodoList({ todos, tab }) {
  // ✅ 必要な場合しか再計算を行わない
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

これで解決しない場合は、少なくとも 1 つの依存値が前回のレンダーと異なっていることが問題です。手動で依存値をコンソールに出力して、デバッグすることができます。

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

コンソール上で、別々の再レンダーによって表示された 2 つの配列を選びます。それぞれについて、配列を右クリックし、“Store as a global variable（グローバル変数として保存）” を選択することで、配列を保存することができます。1 回目に保存した配列が temp1、2 回目に保存した配列が temp2 として保存されたとすると、ブラウザのコンソールを使用して、両方の配列の各依存値が同じかどうかを確認できます。

Object.is(temp1[0], temp2[0]); // 1 つ目の依存値が配列間で同じか
Object.is(temp1[1], temp2[1]); // 2 つ目の依存値が配列間で同じか
Object.is(temp1[2], temp2[2]); // ... 全ての依存値について繰り返す ...

メモ化を妨げている依存値を見つけたら、その依存値を削除する方法を探すか、その依存値もメモ化しましょう。

ループ内のリストの各項目について useMemo を呼び出したいが、禁止されている

Chart コンポーネントが memo でラップされているとします。ReportList コンポーネントが再レンダーされた場合でも、リスト内の各 Chart の再レンダーはスキップしたいです。ところが、以下のようにループ内で useMemo を呼び出すことはできません。

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 このように、ループの中で useMemo を呼び出すことはできない
        const data = useMemo(() => calculateReport(item), [item]);
        return (
          <figure key={item.id}>
            <Chart data={data} />
          </figure>
        );
      })}
    </article>
  );
}

その場合は、各アイテムをコンポーネントに切り出し、アイテムごとにデータをメモ化します。

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ useMemo をトップレベルで呼び出すことができる
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

あるいは、useMemo を削除し、Report 自体を memo でラップすることでも解決できます。item props が変化しない場合は、Report の再レンダーはスキップされ、Chart の再レンダーもスキップされます。

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  const data = calculateReport(item);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
});