やあ、こんにちは。Reactの世界へようこそ。
フロントエンドの深淵を覗き込んでいると、ときどき「あれ？ なんだか画面の動きがもっさりしてきたぞ？」と感じる瞬間が訪れるはずです。
そう、Reactは魔法のように画面を更新してくれますが、その裏では「コンポーネントが再レンダリングされるたびに、中のコードを全部最初からやり直す」という、実はかなり律儀で働き者な性質があるんです。
今日は、そんなReactの「働きすぎて疲れてしまう癖」を治すための秘策、『useMemo』について、お茶でも飲みながら紐解いていきましょう。
—
1. その計算、毎回やる必要ある？
まずは、想像してみてください。あなたは今、「超絶複雑な計算」をしなければならないとします。たとえば、「100万個の数字の中から特定の条件に合うものを探し出し、統計を取る」といったような、CPUが汗をかくような作業です。
もし、この作業を「画面上のボタンを押すたび」や「文字を1文字入力するたび」に繰り返していたらどうなるでしょう？
当然、パソコンは悲鳴を上げて、画面の反応はどんどん遅くなりますよね。
Reactも同じです。コンポーネントが再レンダリングされるたびに、関数の中身を上から下まで全部実行し直します。でも、「前回の計算結果と、今回の入力データが同じなら、計算なんてしなくていいじゃないか！」と思いませんか？
その願いを叶えてくれるのが、`useMemo`というフックです。
2. useMemoは「魔法のメモ帳」
`useMemo`を一言で言えば、「計算結果を記録しておく魔法のメモ帳」です。
1. 計算結果をメモ帳（メモリ）に書き留める。
2. 次回、同じ計算を求められたら、計算せずにメモ帳から答えを読み出す。
3. もし「材料（依存データ）」が変わったら、メモを捨てて新しく計算し直す。
この仕組みを使うことで、無駄な再計算をバッサリとカットできるんです。
コードで見てみましょう
まずは、`useMemo`を使わない「頑張り屋さんすぎる」コードを見てみます。
import React, { useState } from ‘react’;
function ExpensiveComponent({ count }) {
// 非常に重い計算を想定（わざと時間をかけています）
const heavyCalculation = (num) => {
console.log(“重い計算を実行中…”);
for (let i = 0; i < 1000000000; i++) {} // 無駄にループさせる
return num 2;
};
// これだと、他のStateが変わるたびに毎回「重い計算」が走ってしまう！
const result = heavyCalculation(count);
return
;
}
このままだと、親コンポーネントで別の状態（例えば入力フォームなど）が更新されただけでも、この`heavyCalculation`が動いてしまい、画面がカクつきます。
これを、`useMemo`でスマートに解決してみましょう。
import React, { useState, useMemo } from ‘react’;
function SmartComponent({ count }) {
// useMemoで計算結果を包む
// 第2引数の [count] が「これに変更があった時だけ再計算してね」という合図です
const result = useMemo(() => {
console.log(“重い計算を実行中…”);
let sum = 0;
for (let i = 0; i < 1000000000; i++) { sum += i; }
return count 2;
}, [count]); // ← ここがポイント！
return
;
}
どうでしょう？ `[count]` という配列を渡すことで、「countが変わった時以外は、前のメモを見ろ！」とReactに指示を出しているイメージです。これで、無駄な計算は一切行われません。
—
3. 注意点：なんでもかんでもメモすればいいわけじゃない
ここで一つ、ベテランからの大切なアドバイスを。
「じゃあ、全部の計算にuseMemoを使えば最強じゃない？」 と思うかもしれませんが、それは違います。
実は、`useMemo`を使うこと自体にも、Reactは「メモ帳を管理するコスト」を支払っています。
- 単純な計算（例: `a + b`）: これを`useMemo`で囲むのは、買い物に行くのにわざわざGPSとルート検索アプリを起動するようなもの。そのまま計算した方が圧倒的に早いです。
- 重い計算: 使う価値は大いにあります。
「その計算は、本当に重いのか？」を一度立ち止まって考えてみてください。Reactは賢いので、大抵の計算はメモなしでも爆速でこなしてくれます。「パフォーマンスが落ちてきたな」と感じた時の、とっておきの切り札として使うのが、一番カッコいい使い方ですよ。
—
最後に：つまずくのは当たり前です
`useMemo`の依存配列（第2引数）を書き忘れたり、逆に中身を頻繁に変えてしまってメモの効果が出なかったり。そんな失敗は、世界中のどんなプログラマーも一度は通る道です。
「あ、この計算、毎回やり直してるかも？」と気づけたこと自体が、あなたのフロントエンドエンジニアとしての大きな一歩です。
まずは小さなコンポーネントで、`console.log`を仕込んで「あ、計算が走っていない！」という感覚を体感してみてください。その小さな成功体験の積み重ねが、いつかあなたを素晴らしいアーキテクトへと育ててくれるはずです。
応援していますよ。困ったことがあれば、いつでもまた聞きに来てくださいね。
コメント