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 を再利用することができる�?です。

こ�?ようなキャッシュ�?ことを、メモ化と呼びます。

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>
  );
}

props である theme を変化させると一瞬アプリがフリーズしますが、<List /> を JSX から削除すると、高速に動作するようになったはずです。すなわち、こ�? List コンポーネントには最適化する価値があるということです。

通常、あるコンポーネントが再レンダーされたときは、そ�?子コンポーネントも再帰的にすべて再レンダーされます。これが、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 }) {
  // Every time the theme changes, this will be a different array...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... so List's props will never be the same, and it will re-render every time */}
      <List items={visibleTodos} />
    </div>
  );
}

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

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );
  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      <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]); // 🚩 Caution: Dependency on an object created in the component body
  // ...

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

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

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Only changes when text changes

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
  // ...

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

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ Only changes when allItems or text changes
  // ...

これで、計�?�が直接 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 }) {
  // This component function will run twice for every render.

  const visibleTodos = useMemo(() => {
    // This calculation will run twice if any of the dependencies change.
    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);
    // ✅ Correct: mutating an object you created during the calculation
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

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

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

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

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

  // 🔴 You can't return an object from an arrow function with () => {
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

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

  // This works, but is easy for someone to break again
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

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

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

  // ✅ This works and is explicit
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

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

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

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

function TodoList({ todos, tab }) {
  // 🔴 Recalculates every time: no dependency array
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

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

function TodoList({ todos, tab }) {
  // ✅ Does not recalculate unnecessarily
  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]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

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

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

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

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 You can't call useMemo in a loop like this:
        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 }) {
  // ✅ Call useMemo at the top level:
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

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

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

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