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

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

• 技術
• あとで読む