React Hooks——2018年にReact 16.8で導入されてから、現代のReact開発の中核技術として定着した。useState・useEffect・useContext・useMemo・useCallback・useRef・カスタムフック等の基本Hooksに加え、React 18以降のuseTransition・useDeferredValue・useId等の新Hooksも続々と登場している。本記事では、現代のReact Hooks実践テクニックを、初心者から経験者まで使える形で体系的に解説する。
React Hooksの基本3点セット
① useState——状態管理の基本
コンポーネント内の状態を管理する最も基本的なHook。配列・オブジェクト・プリミティブ型を保持できる。
典型的な使い方:
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: "", age: 0 });
const [items, setItems] = useState([]);
② useEffect——副作用処理
コンポーネントのライフサイクル(マウント・更新・アンマウント)に応じて処理を実行する。データフェッチ・イベントリスナー登録・タイマー設定の主要用途。
useEffect(() => {
// マウント時の処理
fetchData();
return () => {
// クリーンアップ(アンマウント時)
};
}, []); // 空配列 = マウント時のみ
③ useContext——プロップドリリング解消
親→子→孫と props を渡し続ける「プロップドリリング」を解消するためのHook。テーマ・認証・言語設定等のグローバル状態を効率的に共有できる。
パフォーマンス最適化の2大Hooks
useMemo——計算結果のメモ化
重い計算結果を再レンダリング時に再計算しないようキャッシュする。配列のソート・フィルタリング・複雑なオブジェクト生成等で有効。
const sortedItems = useMemo(() => {
return items.sort((a, b) => a.name.localeCompare(b.name));
}, [items]);
useCallback——関数のメモ化
関数自体をメモ化し、子コンポーネントの不要な再レンダリングを防ぐ。React.memoと組み合わせて使うのが効果的。
const handleClick = useCallback(() => {
// 処理
}, [dependency]);
useRef の3つの用途
- ① DOM要素への直接アクセス:
inputRef.current.focus() - ② 値の保持(再レンダリングなし): 前回値の保存・タイマーID保存
- ③ コンポーネントインスタンス変数: クラスコンポーネントのインスタンス変数の代替
React 18以降の新Hooks
useTransition——非緊急な状態更新
大量データの処理・重いリスト更新等を「非緊急」マークし、ユーザー入力等の緊急更新を優先的に処理する。検索フィルタ・タブ切替等で効果的。
useDeferredValue——値の遅延更新
useTransitionと同様の効果を、値の遅延として実装。重いリスト表示等のオートサジェスト機能で活用される。
useId——SSR対応のユニークID生成
SSR(Server-Side Rendering)とクライアントの両方でユニークなIDを生成する。フォームのlabel-input連携、aria属性等で必須。
カスタムフックの設計パターン
典型的なカスタムフック
- useFetch: API呼び出しの抽象化
- useLocalStorage: localStorage連動の状態管理
- useDebounce: 値の変更を遅延させる
- useToggle: ON/OFF切替の単純な状態管理
- useWindowSize: ウィンドウサイズの取得・監視
カスタムフックの命名規則
- 必ず
useから始める(React rule) - キャメルケース表記
- 意味のある名前(useFetchUser・useDebounce 等)
React Hooksの落とし穴
無限ループ
useEffectの依存配列が誤って毎回新しい参照を持つ場合、無限ループになる。オブジェクト・配列・関数を依存配列に直接渡さない。useMemoまたはuseCallbackでメモ化する。
古い状態(Stale State)
クロージャによって、useEffect内で過去の状態を参照してしまう問題。setState(prev => ...)形式の関数引数を使い、現在の状態を参照する。
useMemo・useCallback の過剰使用
すべての関数・値をメモ化することは、逆にパフォーマンス悪化を引き起こす。プロファイリング(React DevTools Profiler)で実際のボトルネックを特定してから最適化する。
テスト戦略
- React Testing Library: コンポーネントのテスト標準
- @testing-library/react-hooks(または
renderHook): カスタムフック単体テスト - Jest / Vitest: テストランナー
- MSW(Mock Service Worker): API モック
パフォーマンス計測ツール
- React DevTools Profiler: コンポーネントレンダリング時間の可視化
- Chrome DevTools Performance: 全体的なパフォーマンス分析
- Lighthouse: Core Web Vitals測定
- Web Vitals(@web/web-vitals): 本番環境計測
よくある質問
Q. Class Componentから Functional Componentへの移行は?
React 16.8以降の現代開発では、Functional Component + Hooks が標準。新規開発はFunctional Componentで開始、既存のClass Componentは段階的に移行が現実的です。React 19以降では完全にFunctional推奨です。
Q. Server Componentsとの違いは?
React 18以降のServer Componentsは、サーバー側で実行される新しいコンポーネントタイプ。Hooks(useState・useEffect等)はクライアント側コンポーネントでのみ使用可能。Server Componentsは「’use client’」ディレクティブで明示的にクライアント化する必要があります。
Q. Reduxは今でも必要?
useContext + useReducer で多くのケースをカバーできるため、Reduxは小・中規模アプリには不要。大規模・複雑なアプリでは Zustand・Jotai・Recoil等の軽量状態管理ライブラリが現代的選択。Redux Toolkit(RTK Query)は今でもエンタープライズで使われています。
Q. Next.js / Remixの選び方は?
Next.js が業界標準で、App Router(React Server Components対応)が現在の推奨。Remixは Web Standards重視・Form アクション中心の哲学で、SSR/SSG/ISRの統合度は Next.jsに譲ります。新規プロジェクトはNext.js App Router推奨です。
Q. React 19の重要な変更点は?
① Actions(formAction属性で非同期フォーム処理)、② useFormState・useFormStatus Hooks、③ use() Hookの本格対応、④ より効率的なコンパイラ(React Compiler)、⑤ Server Component安定化。Server Components+App Router が新規開発の標準形になっています。
あなたのReact学習 5ステップ
- STEP 1: React公式チュートリアル(react.dev)で基礎
- STEP 2: useState・useEffectで簡単アプリ作成
- STEP 3: useContext・useMemo・useCallback等の応用
- STEP 4: カスタムフック作成・React DevToolsで分析
- STEP 5: Next.js App Routerで本格的アプリ構築
関連記事として、TypeScript実践・Next.js最新機能・パフォーマンス最適化等を今後配信予定です。
コメント