React Hooks超入門【2025年版】：useState/useEffectから始める実践ガイド

Hooksは「関数コンポーネントの拡張」

• 状態（useState）、副作用（useEffect）、メモ化（useMemo/useCallback）、参照（useRef）を関数コンポーネントで扱うための仕組み。
• ルール：トップレベルで同じ順序で呼ぶ。条件分岐やループの中で呼ばない。

useState：最小の状態管理

const [count, setCount] = useState(0);
<button onClick={() => setCount(c => c + 1)}>+1</button>

• 更新は関数形式（c => c + 1）を推奨。前回値に依存する更新で安全。

useEffect：副作用（データ取得/購読）

useEffect(() => {
  const ctrl = new AbortController();
  fetch('/api/items', { signal: ctrl.signal }).then(r => r.json()).then(setItems);
  return () => ctrl.abort(); // クリーンアップ
}, []); // 依存なし=初回のみ

• 依存配列は「中で使う値」を全て列挙。ESLintのルールを有効化。

useMemo / useCallback：再レンダ最適化

const total = useMemo(() => items.reduce((s, x) => s + x.price, 0), [items]);
const onSelect = useCallback((id: string) => setSel(id), []);

• 「遅い計算」や「propsで渡す関数」にのみ使う。むやみに増やすと逆効果。

useRef：値を保持/DOM参照

const inputRef = useRef<HTMLInputElement>(null);
function focus() { inputRef.current?.focus(); }

• 再レンダさせずに値を保持したい時に便利（タイマーIDなど）。

よくある落とし穴（チェック）

• 依存配列の漏れ（古い値＝stale closure）
• 重い処理をレンダ内で実行（useMemoへ）
• forEach(async ...) は待たない（for..of or Promise.all）
• useEffect の中で状態をループ更新 → 無限再レンダ

Next.jsでのポイント（App Router）

• まずはサーバーコンポーネントでデータ取得し、最小範囲だけ "use client" に。
• クライアント側の重い処理は遅延読み込みやWeb WorkerでINPを守る。

まとめ

「状態→副作用→最適化→参照」の順に段階習得。ESLintのHooksルールを友に、シンプルに使い始めましょう。