Reactコンポーネントの不要な再レンダリングを制御する。useMemo/usecallbackの使いどころとPropsの粒度管理 | レバテックラボ（レバテックLAB）

テクノロジーカテゴリーの変更を依頼記事元:

levtech.jp

31users がブックマークコメント

記事へのコメント1件

注目コメント
新着コメント

yasu-log numberという変数名が気になり（TSの型注釈とまぎらわしい）／{ marginTop: 10 }のメモ化はせず、Parentcomponentの外側に定数として置いたほうがよいのでは

2025/11/17 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Flevtech.jp%2Fmedia%2Farticle%2Fcolumn%2Fdetail_754%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://levtech.jp/media/article/column/detail_754/">Rea<strong>c</strong>tコンポーネントの不要な再レンダリングを制御する。useMemo/use<strong>c</strong>allba<strong>c</strong>kの使いどころとPropsの粒度管理 | レバテックラボ（レバテックLAB）</a><a href="https://b.hatena.ne.jp/entry/s/levtech.jp/media/article/column/detail_754/">はてなブックマーク - Rea<strong>c</strong>tコンポーネントの不要な再レンダリングを制御する。useMemo/use<strong>c</strong>allba<strong>c</strong>kの使いどころとPropsの粒度管理 | レバテックラボ（レバテックLAB）</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

Reactコンポーネントの不要な再レンダリングを制御する。useMemo/usecallbackの使いどころとPropsの粒度管理 | レバテックラボ（レバテックLAB）

Propsの渡し方は、アプリケーションの再レンダリング性能に大きな影響を与えます。特に重要なのは、参照... Propsの渡し方は、アプリケーションの再レンダリング性能に大きな影響を与えます。特に重要なのは、参照の同一性とProps粒度の適切な管理です。毎回新しいオブジェクトや関数を作成することは、子コンポーネントの不要な再レンダリングを引き起こします。 // ❌ 毎回新しいオブジェクト・関数が作成される function Parentcomponent() { return ( <childcomponent style={{ marginTop: 10 }} // 毎回新しいオブジェクト onAction={() => console.log('action')} // 毎回新しい関数 /> ); } // ✅ 安定した参照を提供 const childcomponent = React.memo(({ style, onAction }) => { // 子コンポーネントの実装 return