React Hooks中級【パフォーマンス最適化/2025年】：再レンダ抑制と入力応答性の実践

再レンダの原因を区別する

• propsが新しい参照（関数/オブジェクト/配列）になる
• state更新がコンポーネント階層に波及
• コンテキストの広域更新

対策は「境界の切り方」と「参照の安定化」。

参照の安定化（useCallback/useMemo）

const onSelect = useCallback((id: string) => setSel(id), [setSel]);
const expensive = useMemo(() => compute(list), [list]);

• 使い所は「高頻度レンダ」「propsで子に渡す関数/値」「重い計算」。
• やみくもなメモ化は逆効果（計測で判断）。

メモ化境界（memo）とリストの最適化

const Row = memo(function Row({ item }: { item: Item }) { /* ... */ });

• keyは安定IDを使用。
• リストは仮想化（react-window等）でDOMコストを削減。

遅延ローディングとトランジション

import dynamic from 'next/dynamic';
import { startTransition, useState } from 'react';

const Heavy = dynamic(() => import('./HeavyChart'), { ssr: false });

function SearchBox() {
  const [q, setQ] = useState('');
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    const v = e.target.value;
    setQ(v); // 直ちに視覚反映
    startTransition(() => refine(v)); // 重処理は低優先
  }
  return <input value={q} onChange={onChange} />;
}

Web Workerで重処理を隔離

// worker.ts
self.onmessage = (e) => { self.postMessage(heavy(e.data)); };

// component.tsx
const w = useMemo(() => new Worker(new URL('./worker.ts', import.meta.url)), []);
function run(payload: any) { w.postMessage(payload); }

INPを守るチェックリスト

• 入力ハンドラは即時に戻す（重処理は遅延/ワーカー）
• メモ化境界を適切に置き、propsの参照を安定化
• 大きなリストは仮想化
• 動的UIは段階表示（Suspense/ストリーミング）

まとめ

「境界×参照安定×遅延×隔離」の4点で、体感性能とINPを安定化できます。