React Hooks - 中級

カスタムフック

再利用可能なロジックをカスタムフックに抽出

useLocalStorage
localStorage に値を永続化するフック

保存された値: (なし)

ページをリロードしても値が保持されます

const [value, setValue] = useLocalStorage("key", initialValue);
useDebounce
入力を遅延させて API 呼び出しを最適化
入力値:(空)
デバウンス後 (500ms):(空)
検索実行回数:0

入力を止めてから500ms後に検索が実行されます

useToggle
シンプルな boolean 切り替えフック
OFF
const [value, toggle, setValue] = useToggle(false); toggle(); // 値を反転
カスタムフック作成のポイント
良いカスタムフックを作るためのガイドライン
  • 1

    use で始める命名

    React がフックとして認識するため必須です

  • 2

    単一の責任

    1つのフックは1つの機能に集中させる

  • 3

    クリーンアップを忘れずに

    useEffect 内のタイマーやイベントリスナーは必ず解除

  • 4

    TypeScript で型付け

    ジェネリクスを使って汎用的なフックを作成

Next Steps
次のステップ

Server Actions でサーバー処理を学んでみましょう。

カタログを見る