こんにちは。Reactの世界へようこそ。
日々コードを書いていると、「あれ？ このコンポーネント、今のタイミングで再レンダリングされる必要ある？」とモヤモヤすること、ありますよね。
大丈夫、それはあなたが成長している証拠です。今日はReactのパフォーマンス最適化の第一歩、`React.memo`という魔法について、一緒に紐解いていきましょう。
—
1. 「お節介な親」と「真面目な子供」の物語
Reactのコンポーネントには、一つ困ったクセがあります。
「親が再レンダリングされると、子供も無条件で再レンダリングされる」という性質です。
これを身近な例で例えてみましょう。
あなたは「お父さん（親）」で、子供に「お小遣い帳（子）」を付けてもらっているとします。あなたは自分の持ち物を確認するたびに（親のレンダリング）、子供に「お小遣い帳を見せて！」と声をかけます。
でも、お小遣い帳の内容が全く変わっていないなら、わざわざ毎回書き直させる必要はありませんよね？
`React.memo`は、そんな「真面目な子供」に、「前回から内容が変わっていないなら、そのまま以前の記録を使っていいよ」と伝えるための、いわば「お守り」のようなものなんです。
—
2. React.memoを使ってみよう
書き方は驚くほどシンプルです。コンポーネントを定義した後、最後に`React.memo()`で包んであげるだけ。
import React from ‘react’;
// 普通のコンポーネント
const MoneyBook = ({ amount }) => {
console.log(“お小遣い帳を書き直しました！”);
return
;
};
// React.memoで包むだけで、「propsが変わらない限り再レンダリングしない」という
// 賢い子供に変身します
export default React.memo(MoneyBook);
これだけで、親コンポーネントが何度再レンダリングされても、`amount`（お小遣いの額）が変わらない限り、`MoneyBook`は「書き直し」をサボって（＝再レンダリングをスキップして）、以前の結果をそのまま表示してくれます。
—
3. 「これ、変わった？」を自分で判断する（比較関数のカスタマイズ）
デフォルトの`React.memo`は、propsが「前と同じかどうか」を自動でチェックしてくれます。でも、時には「このデータは複雑だから、私が直接チェックしたい！」という場面も出てきます。
そんな時は、第二引数に「比較関数」を渡してあげましょう。
const MyComponent = React.memo(({ data }) => {
return
;
}, (prevProps, nextProps) => {
// ここで「前（prev）」と「今（next）」を比較します
// trueを返すと「再レンダリングしない」、falseを返すと「再レンダリングする」
return prevProps.data.id === nextProps.data.id;
});
この比較関数の中では、「名前は変わったかもしれないけど、IDが同じなら同じ人物だよね！」といった、人間味のある柔軟な判断ができるようになります。
—
4. 現場のチーフアーキテクトからのアドバイス
ここで一点、とても大事なことをお伝えします。
「とりあえず全部memoしちゃえ！」は、実は逆効果になることがあります。
`React.memo`は、毎回「前回と違うかな？」という比較計算を行います。もしコンポーネントが非常に単純で、一瞬でレンダリングが終わるようなものなら、比較計算をするコストの方が高くついてしまうことがあるんです。
- memoを検討すべき場面:
- レンダリングに時間がかかる重たいコンポーネント
- 頻繁に再レンダリングが起きるリストアイテム
- propsが複雑なオブジェクトや配列である場合
「最適化」は、あくまで「問題が起きてから」で大丈夫。まずはコードを動かして、もし「ちょっと重いな」と感じたら、`React.memo`というお守りをそっと添えてみてください。
—
まとめ
- React.memoは「無駄な再レンダリングを防ぐ」ための道具。
- 「内容が変わってなければ、そのまま使おう」という賢い判断をしてくれる。
- 比較関数を使えば、チェックのルールを自分で決められる。
- やりすぎは禁物。必要なところにだけ優しく使おう。
プログラミングの世界は、時に冷たく感じるかもしれません。でも、Reactはこうして少しずつ、私たちが「より快適に」動く仕組みを整えるための手助けをしてくれる、温かいライブラリです。
また何か壁にぶつかったら、いつでも聞いてくださいね。あなたの開発ライフが、少しでも軽やかで楽しいものになりますように。応援しています！
コメント