状態の更新が過度な再レンダリングを引き起こさないようにするには？

Question

Accepted Answer

状態の変更は再レンダリングをトリガーし、不適切に構造化された状態は**必要以上に多くの再レンダリングを引き起こす可能性**があります。これによってアプリが遅くなります。主な戦略は、選択的に購読する、状態を分割する、メモ化する、そして状態をローカルに保つことです。 ## 1. 必要な最小限のスライスに購読する ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` 選択的な購読（Zustand/Redux セレクタ、Jotai アトム）は最も重要な方法です。コンポーネントはストアのすべての更新ではなく、特定のスライスが変更されたときだけ再レンダリングされます。 ## 2. 状態 / context を分割して影響範囲を制限する ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. コンポーネントと値をメモ化する ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` メモ化により、子コンポーネントが props（参照）変わらない場合に再レンダリングされることを防げます。ただし、props とコールバックを参照的に安定に保ち（`useCallback`/`useMemo`）、状態を**イミュータブルに**更新した場合にのみ機能します。 ## 4. 状態をできるだけローカルに保つ ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. 派生値を保存しない。毎回のレンダリングで新しい参照を避ける ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. 派生データに対してメモ化されたセレクタを使用する ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## 最初に測定する ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## なぜ重要なのか過度な再レンダリングは React/状態駆動アプリのパフォーマンス低下の主な原因であり、状態がどのように構造化され、購読されるかに起因しています。ツールキット（選択的で限定的な購読、分割されたコンテキスト、参照が安定したメモ化、イミュータブルな更新、そして状態のローカル化）は、再レンダリングの範囲を直接制御します。重要なことに、最適化する前に**測定**（Profiler）して実際のボトルネックを見つけるべきです。考えのない memoization は、利益のない複雑さを追加するだけです。再レンダリングが何をトリガーするか、そしてそれをどのように制限するかを理解することは、大規模アプリケーションのパフォーマンスに不可欠です。