問題一覧に戻る
中級カスタムフック
問題58: フック間の組み合わせ

複数のカスタムフックを組み合わせて複雑なロジックを構築する方法を学びます。既存のフックを再利用して新しい機能を作り、コードの重複を避けます。この例では、useStateとuseDebounceを組み合わせて検索機能を実装します。フックの合成により、小さな部品から大きな機能を構築するコンポジションパターンを実現します。実際の開発ではこのようなパターンを使って保守性の高いコードを書きます。

import React from 'react';

{/* 組み合わせフック */}
function useSearchDebounce(initialValue = "") {
  const [search, setSearch] = useState(initialValue);
  {/* デバウンスされた検索値 */}
  const debouncedSearch = (search, 300);
  
  return { search, setSearch,  };
}

function App() {
  {/* 組み合わせフックを使用 */}
  const { search, , debouncedSearch } = useSearchDebounce();
  
  return (
    <div>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <p>検索中: {debouncedSearch}</p>
    </div>
  );
}

export default App;
···