ReactHooks 主要１２種についてまとめてみた

この記事について

React Hooks について学習しましたので、それぞれがどのような役割をもったHooksなのかということについて確認するためにまとめました。ReactHooksの初学者の方の参考になれば幸いです。

useState()

概要

• コンポーネント内で変更が必要な単一の値や状態を管理するための最もシンプルな Hook
• 単純な状態変更（ON/OFF、数値、文字列など）に特化しており、コンポーネントのローカルな状態管理において最も基本的な Hook

使用例

1. UI 要素の状態管理

   • ハンバーガーメニューの開閉状態（true/false）
   • モーダルの表示/非表示の切り替え
   • タブの選択状態（現在のアクティブタブ）

2. フォーム関連の値管理

   • 入力テキストの値
   • チェックボックスの ON/OFF 状態
   • ラジオボタンの選択値

3. ユーザーアクションによる即時の状態変更

   • カウンターの増減値
   • ショッピングカート内の商品数
   • いいねボタンの状態

useEffect()

概要

• コンポーネントのライフサイクルに依存した処理を実行するための Hook
• コンポーネントのマウント、アンマウント、更新時に特定の処理を実行するために使用される
• 副作用（データの取得、DOM の操作、タイマーの設定など）を管理するために使用される

使用例

1. 外部データとの連携

   • API からのデータ取得
   • WebSocket の接続/切断
   • データベースの購読設定/解除

2. ブラウザ API との連携

   • イベントリスナーの設定/解除
   • ローカルストレージの読み書き
   • タイトルの動的更新

3. タイマー/インターバル処理

   • 定期的なデータ更新
   • カウントダウンタイマー
   • 自動スライドショー

useRef()

概要

• レンダリング間で値を保持するための Hook
• DOM への直接的な参照を保持するために使用される
• 値の変更時に再レンダリングを引き起こさない

使用例

1. DOM 要素への直接アクセス

   • フォーム要素へのフォーカス設定
   • 動画・音声要素の制御
   • キャンバス要素の操作

2. 以前の値の保持

   • 前回の props/state の値を記憶
   • タイマー ID の保持
   • アニメーションフレーム ID の保持

3. ミュータブルな値の保持

   • レンダリングに影響を与えない値の保存
   • インターバル ID の管理
   • 外部ライブラリのインスタンス保持

useState との違い

• useState は値の変更時に再レンダリングを引き起こす
• useRef は値の変更時に再レンダリングを引き起こさない
• useRef の値の変更は即時反映される

useContext()

概要

• コンポーネント間でデータを共有するための Hook
• Props バケツリレーを避けるために使用される
• グローバルな状態管理を実現する手段の 1 つ

使用例

1. アプリケーション全体での共有データ

   • ユーザー認証情報
   • テーマ設定（ダーク/ライトモード）
   • 言語設定（多言語対応）

2. 複数階層のコンポーネントでの共有

   • ユーザー設定
   • アプリケーションの設定値
   • 共通のデータ

3. 動的な値の共有

   • リアルタイムデータ
   • グローバルな状態更新
   • 複数コンポーネント間の同期

useState との違い

• useState はコンポーネントローカルの状態管理
• useContext はグローバル/共有の状態管理
• useContext は複数のコンポーネントで値を共有可能

useCallback()

概要

• 関数をメモ化（キャッシュ）するための Hook
• 不要な再レンダリングを防ぐために使用される
• パフォーマンス最適化のための Hook

使用例

1. イベントハンドラーの最適化

   • ボタンクリックのコールバック
   • フォーム送信処理
   • スクロールイベントのハンドラー

2. 子コンポーネントへの関数の受け渡し

   • リスト項目の操作関数
   • データ更新用コールバック
   • フィルタリング関数

3. 外部 API との通信処理

   • データフェッチ関数
   • WebSocket 通信処理
   • 非同期処理のラッパー

useCallback が必要な場合

1. メモ化された子コンポーネントに関数を渡す時
2. 関数自体が重い処理を含む時
3. 関数が依存配列として使用される時

useCallback が不要な場合

1. 単純なイベントハンドラー
2. メモ化されていない子コンポーネント
3. コンポーネント内でのみ使用される関数

useMemo()

概要

• 値をメモ化（キャッシュ）するための Hook
• 計算コストの高い処理の結果を再利用
• パフォーマンス最適化のための Hook

使用例

1. 複雑な計算結果のメモ化

   • フィルタリング処理の結果
   • ソート処理の結果
   • データの加工処理結果

2. オブジェクトや配列の再生成防止

   • スタイルオブジェクト
   • オプション配列
   • 設定オブジェクト

3. 重い処理の最適化

   • 大量データの処理
   • 複雑な数値計算
   • グラフデータの生成

useCallback との違い

• useMemo: 値のメモ化
• useCallback: 関数のメモ化
• useCallback(fn, deps) は useMemo(() => fn, deps) と同等

useMemo が必要な場合

1. 計算コストが高い処理がある時
2. メモ化された子コンポーネントにオブジェクトや配列を渡す時
3. レンダリングが遅くなっている時

useMemo が不要な場合

1. 単純な計算の場合
2. プリミティブな値を扱う場合
3. レンダリングが十分に速い場合

useOptimistic()

概要

• 楽観的な更新（Optimistic Updates）を管理するための Hook
• ユーザーアクションの結果を即座に反映させる
• サーバーレスポンスを待たずに UI を更新する

使用例

1. SNS の投稿やいいね機能

   • いいねボタンの即時反映
   • コメントの即時表示
   • 投稿の即時表示

2. データ操作のフィードバック

   • リストアイテムの削除
   • ステータスの更新
   • 順序の変更

3. フォーム送信の応答

   • 送信完了の即時表示
   • エラー時のロールバック
   • 進行状況の表示

useOptimistic が有効な場合

1. ネットワークレイテンシーが高い操作
2. ユーザー体験の向上が重要な機能
3. エラー発生率が低い操作

useOptimistic が不適切な場合

1. 重要な金融取引
2. エラー発生率が高い操作
3. 厳密な整合性が必要な処理

useTransition()

概要

• UI の応答性を保ちながら重い更新を行うための Hook
• 状態更新の優先順位を制御する
• ローディング状態を管理しながら遅延更新を実現する

使用例

1. 大規模なデータ処理

   • 長いリストのフィルタリング
   • 複雑な検索機能
   • データの一括更新

2. UI 更新の優先順位付け

   • 入力フィールドの即時反応
   • バックグラウンドでの重い処理
   • 段階的な UI 更新

3. ユーザー体験の向上

   • スムーズな入力体験
   • ローディング状態の表示
   • 段階的なコンテンツ表示

useTransition が有効な場合

1. 重い処理による画面のブロッキングを防ぎたい時
2. ユーザー入力の即時反応が重要な時
3. 大量のデータを処理する必要がある時

useTransition が不要な場合

1. 軽い処理の場合
2. 即時の更新が必要な場合
3. シンプルな UI 更新の場合

useDeferredValue()

useDeferredValue()

概要

• 値の更新を遅延させるための Hook
• パフォーマンスの最適化に使用
• 重要度の低い更新を後回しにする

使用例

1. 検索機能の最適化

   • 検索結果の遅延表示
   • 入力中の検索候補表示
   • 大量データのフィルタリング

2. リアルタイムプレビュー

   • テキストエディタのプレビュー
   • グラフの動的更新
   • カスタマイズ設定の反映

3. リストの遅延レンダリング

   • 長いリストの表示
   • 動的なデータ更新
   • 複雑なフィルタリング結果

useTransition との違い

1. 制御の場所

   • useDeferredValue: 値を受け取る側で遅延
   • useTransition: 更新を行う側で制御

2. 使用シーン

   • useDeferredValue: props や state の値の遅延
   • useTransition: 状態更新のタイミング制御

useDeferredValue が有効な場合

1. 重いレンダリングを伴う UI 更新
2. 外部からのデータ（props）の遅延処理
3. 頻繁に更新される値の処理

useDeferredValue が不要な場合

1. 軽い処理の場合
2. 即時の更新が必要な場合
3. ユーザー入力に直接関わる処理

useFormState()

概要

• フォームの状態管理に特化したHook
• サーバーアクションと連携したフォーム処理
• フォームの送信状態とエラー管理を簡略化

使用例

1. フォーム送信処理

   • ログインフォーム
   • 会員登録フォーム
   • 問い合わせフォーム

2. フォームの状態管理

   • バリデーションエラー
   • 送信中の状態
   • 送信結果のフィードバック

3. サーバーアクションとの連携

   • データベース更新
   • API連携
   • ファイルアップロード

useStateとの違い

1. サーバーアクションとの統合

   • useState: クライアントサイドの状態管理
   • useFormState: サーバーアクションと連携した状態管理

2. 用途の違い

   • useState: 汎用的な状態管理
   • useFormState: フォーム特化の状態管理

useFormStateが有効な場合

1. サーバーアクションを使用するフォーム
2. 複雑なフォームの状態管理
3. Progressive Enhancementを重視する場合

useFormStateが不要な場合

1. クライアントサイドのみの簡単なフォーム
2. サーバーアクションを使用しない場合
3. 単純な状態管理で十分な場合

useFormStatus()

概要

• フォームの送信状態を監視するためのHook
• サーバーアクションの進行状況を追跡
• ローディング状態やフォームの状態を管理

使用例

1. フォーム送信の状態表示

   • 送信中のローディング表示
   • 送信ボタンの無効化
   • 進行状況のインジケーター

2. ユーザーフィードバック

   • 送信状態の視覚的表示
   • エラー状態の表示
   • 成功状態の表示

3. フォームのインタラクション制御

   • 二重送信の防止
   • 入力フィールドの無効化
   • キャンセル処理の制御

useFormStateとの違い

1. 目的の違い

   • useFormStatus: フォームの送信状態の監視
   • useFormState: フォームデータと結果の管理

2. 使用場所

   • useFormStatus: Form要素内のコンポーネントでのみ使用可能
   • useFormState: どこでも使用可能

useFormStatusが有効な場合

1. フォーム送信中の状態表示が必要な場合
2. ユーザーへのフィードバックを改善したい場合
3. 送信中の操作を制御したい場合

useFormStatusが不要な場合

1. 単純なフォームの場合
2. 即時の送信処理の場合
3. クライアントサイドのみの処理の場合