以前、「useMemo/useCallbackは付けるほど速くなるという思い込み」について書きました。付けるほど得とは限らない、という話でしたが、今回は逆に「では実際どれくらいの処理で、どれくらいの差が出るのか」を手元で計測してみます。

計測方法

Reactの実際のレンダリングではなく、useMemoが内部でやっていること（依存配列が変わらない間は再計算をスキップする）だけを素のJavaScriptで再現し、Node.jsのprocess.hrtime()で時間を測りました。50回「再レンダリング」される想定で、次の2パターンを比較しています。

  • 重い処理: 10万件の配列をfilterしてからsortする
  • 軽い処理: 10件の配列をfilterするだけ
function heavyFilter(list, threshold) {
  return list.filter(x => x % threshold === 0).sort((a, b) => b - a);
}

function lightFilter(list, threshold) {
  return list.filter(x => x % threshold === 0);
}

⚠️ この計測はあくまで「計算そのものをスキップできたときの差」を見るための簡易シミュレーションです。実際のuseMemoにはReact自身が依存配列を比較するコストが別途かかりますが、今回はそこは含めていません。

結果

手元の環境で実行した一例です（process.hrtime.bigint()で小数点以下4桁まで計測。実行のたびに多少ぶれるため、3回実行した結果を並べます）。

重い処理: 10万件filter+sort（50回レンダリング想定）
  1回目: 81.00ms → 1.37ms（59.1倍）
  2回目: 81.51ms → 1.66ms（49.2倍）
  3回目: 62.32ms → 1.17ms（53.4倍）

軽い処理: 10件filterのみ（50回レンダリング想定）
  1回目: 0.088ms → 0.0016ms（53.9倍）
  2回目: 0.080ms → 0.0015ms（51.7倍）
  3回目: 0.075ms → 0.0016ms（45.9倍）

倍率はどちらも実行ごとに45〜59倍の範囲でばらつきますが、大まかに見ると「50倍前後」という点では重い処理も軽い処理も同じくらいのインパクトがありそうに見えます。ですが絶対値を見ると景色が変わります。重い処理は50回分の再計算で60〜82msほどかかっていたのが、useMemoで1ms台まで縮みました。1回あたりに直すと1.2〜1.6msほど無駄にしていた計算がほぼ消える計算です。一方の軽い処理は、50回分すべて計算し直しても0.1ms未満、1回あたりにすると0.002ms程度の差でしかありません。人間はもちろん、ブラウザの描画タイミングにも影響しないレベルです。

「何倍速くなったか」ではなく「そもそも遅かったか」

この結果が示しているのは、useMemoの効果は「倍率」ではなく「元の処理がどれだけ重いか」という絶対値で決まるということです。重い処理には効果が絶大ですが、軽い処理は倍率だけ見ると重い処理と同じくらい「速くなった」ように見えて、実際は1回あたり0.002ms、誤差レベルの差しかありません。

しかも今回の計測には含めていない「Reactが依存配列を比較するコスト」を足すと、軽い処理の場合はuseMemoを付けたことでむしろ実行時間が伸びる可能性すらあります。比較のためのオーバーヘッドが、スキップできた計算時間より大きくなってしまうケースです。

実務でのライン

「配列が◯件を超えたら」のような一律の基準を持つより、疑わしい処理があったら実際にReact DevTools Profilerやブラウザのconsole.timeで自分のコンポーネントを計測してみるのが確実です。今回の例で言えば、10万件規模の配列操作やAPIレスポンスの重い変換処理は候補になりますが、画面に表示するリストを数件フィルタする程度の処理には、基本的にuseMemoは不要だと考えています。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全24セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください