不要な再レンダリングをどのように診断し修正しますか?

Question

Accepted Answer

まず**測定**し、それから本当の原因を修正します。当て推量で `useMemo` をあちこちに振りかけてはいけません。 ## 診断 **React DevTools Profiler**(「Highlight updates when components render」を有効化)を使います。どのコンポーネントが再レンダリングされたか、そして*なぜ*か(props の変更、state の変更、親のレンダリング、context の変更)を表示します。 ## よくある原因と修正 **1. レンダリングごとに新しいオブジェクト/配列/関数の props** が `React.memo` を無効化します: ```jsx // ❌ new function + new object every render go()} style={{ color: "red" }} /> // ✅ stabilize them const onClick = useCallback(() => go(), []); const style = useMemo(() => ({ color: "red" }), []); ``` **2. レンダリングごとに再生成される Context の値** → すべてのコンシューマが再レンダリングされます。`value` をメモ化するか、context を分割します。 **3. 状態が高すぎる位置にある。** より少ないコンポーネントが依存するように状態を下げることが、しばしば最大の効果を生みます: ```jsx // move the fast-changing input state DOWN into the input component // so typing doesn't re-render the whole page ``` **4. レンダリング内の高コストな処理** → `useMemo` で包みます。 ## 過剰な最適化を避ける再レンダリングは通常**安価**です。React は高速です。ほとんどの「最適化」は、測定可能な利益なしに複雑さを追加するだけです。メモを散りばめるよりも、**構造的な修正**(状態のコロケーション、数千行に対するリストの**仮想化**)を優先してください。プロファイラが明らかにした特定のホットスポットを最適化し、修正が実際に効果を出したか再測定して確認します。