React.memo は何をし、いつ使う価値がありますか？

Question

IT Interview Practice · Accepted Answer

`React.memo` はコンポーネントをラップし、その props が前回のレンダリングと**浅い比較で等しいときに再レンダリングをスキップ**させます。デフォルトでは、子は親が再レンダリングされるたびに再レンダリングされますが、`memo` は props が実際には変わっていない場合にそれを短絡します。 ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## 落とし穴：安定した props が必要 `memo` は**浅い**比較を行います。親が毎レンダリングで新しいオブジェクト・配列・関数を渡すと、比較は常に失敗し、`memo` は何の効果もありません： ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` `useCallback` で関数を安定させることで対処します： ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## 使う価値があるとき - コンポーネントが**同じ** props で**頻繁に**レンダリングされ、かつそのレンダリングが軽くない場合（大きなリスト、コストの高いサブツリー）。 ## 使う価値がないとき - ほとんどのコンポーネントは軽量です。比較自体にコストがあり、すべてをラップすると、得るものもないのに複雑さが増します。**まずプロファイリングを**。React DevTools Profiler で計測し、それから実証されたホットスポットをメモ化しましょう。やみくもにメモ化してはいけません。

関連する質問

落とし穴：安定した props が必要

使う価値があるとき

使う価値がないとき