useMemo を「とりあえず使っていた頃」から理解していった記録

React を触っていると、いつの間にか useMemo を“なんとなく”使っていることがありました。重い処理を避けるためのフック、という説明は目にするものの、本当に必要な場面がどれくらいあるのか、自分の中では曖昧なまま使っていたと思います。

そこで今回は、useMemo の挙動をあらためて確認しながら「どんなときに使うべきなのか」を整理していった記録をまとめています。

■ 1. まずは useMemo を外してみた

最初に試したのは、普段 useMemo をつけていた部分をいったん外してみることでした。


const value = heavyCalc(count);

こうして再レンダリングのログを確認すると、count が変わるたびに heavyCalc が再実行されているのが分かりました。軽い処理なら問題ありませんが、実際に時間がかかる関数に変えると、レンダリングのたびに遅さが目立ちます。

「毎回実行しなくてよい処理は、確かにメモ化したほうがよい」　ここでようやく useMemo の必要性が見えてきました。


const value = useMemo(() => {
  return heavyCalc(count);
}, [count]);

useMemo を追加して動かしてみると、count が変わらない限り heavyCalc が実行されていないことがログで確認できました。依存している値が変わらない限り“前回の結果を再利用する”という動きが、実際に触ってみてようやく理解できた部分です。

また、依存配列を空にすると、初回だけ heavyCalc が実行される挙動も確認できました。

“とりあえず使う” のではなく「この計算は本当に毎回必要か？」という視点のほうがしっくりきました。

試していて気づいたのは、処理が軽い場合は useMemo の効果がほとんど分からない、という点です。むしろコードの見通しが悪くなるだけで、パフォーマンス的なメリットはありませんでした。

この経験から、useMemo を使うのは以下のようなケースに限るほうが自然だと感じました。

“useMemo を使わないほうがよいケース” を把握することで、適切な使いどころが少しずつ見えてきました。

useMemo は、使い始めの頃はつい何となく付けてしまいがちでしたが、実際に動かしてみると用途はとても限定的でした。

必要な場面が分かると、無理に使わず自然に判断できるようになり、React のパフォーマンスの考え方が少し整理されました。