Reactカスタムフックライブラリの実践的比較

React開発において、カスタムフックはロジックの再利用とコンポーネントの単純化を実現する強力な手段です。しかし「どのフックライブラリを使うべきか？」という問いには、用途によって明確な答えがあります。ここでは beautiful-react-hooks、react-async-hook、react-query、react-use、usehooks-ts の5つを、実際のコードと設計思想に基づいて比較します。

📡 非同期データフェッチ：単純 vs 完全装備

react-async-hook: 最小限の非同期ラッパー

react-async-hook は useAsync という1つの主要フックで、Promiseの実行と状態管理を簡単にします。

import { useAsync } from 'react-async-hook';

function UserProfile({ userId }) {
  const asyncResult = useAsync(fetchUser, [userId]);

  if (asyncResult.loading) return <div>Loading...</div>;
  if (asyncResult.error) return <div>Error!</div>;
  return <div>{asyncResult.result.name}</div>;
}

このアプローチはシンプルですが、キャッシュや自動再検証、並列リクエストの重複排除といった機能はありません。同じユーザーIDで複数回呼び出すと、毎回ネットワークリクエストが発生します。

react-query: データフェッチのフルスタックソリューション

react-query はキーに基づいた自動キャッシュ、バックグラウンド更新、エラーハンドリング、依存クエリなどを提供します。

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    staleTime: 1000 * 60 * 5 // 5分間はfreshと見なす
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;
  return <div>{data.name}</div>;
}

同じ queryKey を使う限り、2回目以降はキャッシュから即座に返却され、不要なリクエストは発生しません。さらに、画面に戻ったときに自動で最新情報を取得（stale-while-revalidate）するなど、UX向上のための機能が豊富です。

他のライブラリの対応

• beautiful-react-hooks: 非同期専用フックは提供していません。
• react-use: useAsync や useAsyncFn がありますが、キャッシュ機能はなく、react-async-hook と同程度のシンプルさです。
• usehooks-ts: 非同期専用フックは含まれていません。

💡 結論: サーバーからデータを取得する必要があるなら、たとえ簡単なケースでも react-query を使うことを強く推奨します。将来的に要件が複雑になってもスムーズに拡張できます。

🔧 汎用ユーティリティフック：広さ vs 厳選

react-use: 超多機能だが型が弱い

react-use は100以上のフックを提供しており、例えば以下のようなものがあります。

import { useDebounce, useLocalStorage, useWindowSize } from 'react-use';

function MyComponent() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  
  const [storedName, setStoredName] = useLocalStorage('name', '');
  
  const windowSize = useWindowSize();
  
  // ...
}

ただし、TypeScriptサポートは完全ではなく、一部のフックでは型推論が効かなかったり、型定義が曖昧だったりします。また、提供されているフックの質にばらつきがあり、一部はドキュメントが不十分です。

usehooks-ts: 厳選された高品質フック

usehooks-ts は人気のあるユーティリティフックをTypeScriptで再実装したもので、コード品質と型安全性に重点を置いています。

import { useDebounce, useLocalStorage, useWindowSize } from 'usehooks-ts';

function MyComponent() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  
  const [storedName, setStoredName] = useLocalStorage('name', '');
  
  const { width, height } = useWindowSize();
  
  // 全て完全なTypeScriptサポート
}

提供されているフックの数は react-use より少ないですが、どれも一貫性のあるAPI設計としっかりとした型定義、そして明確なドキュメントが特徴です。

beautiful-react-hooks: UIインタラクションに特化

このライブラリは主にマウス、キーボード、位置情報などのDOM/ブラウザイベントを扱います。

import { useMouse, useGeolocation } from 'beautiful-react-hooks';

function InteractiveComponent() {
  const mouse = useMouse();
  const geo = useGeolocation();
  
  return (
    <div>
      Mouse: ({mouse.x}, {mouse.y})
      Location: {geo.latitude}, {geo.longitude}
    </div>
  );
}

ただし、公式ドキュメントが不十分で、APIが頻繁に変わる可能性があります。また、メンテナンス状況も不安定です。

⚠️ 非推奨・注意点

• beautiful-react-hooks: GitHubリポジトリの更新が滞っており、公式ドキュメントも不完全です。新しいプロジェクトでは使用を避けてください。代わりに react-use や usehooks-ts の同等機能、または自作フックを検討しましょう。
• react-async-hook: 非同期処理の基本的なラッパーとしては有効ですが、react-query の普及により、新規プロジェクトでの採用理由が薄れています。特にキャッシュや再検証が必要になる可能性があるなら、最初から react-query を使うべきです。

🧩 実際の使い分けシナリオ

シナリオ1: 管理画面ダッシュボード（API多数、キャッシュ必須）

• ✅ 選択: react-query + usehooks-ts
• 理由: データフェッチは react-query で統一し、フォーム入力のディバウンスやローカルストレージなどは usehooks-ts で補完。

// データ取得
const { data: users } = useQuery({ queryKey: ['users'], queryFn: fetchUsers });

// フォーム制御
const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 300);

// ローカル設定
const [theme, setTheme] = useLocalStorage('theme', 'light');

シナリオ2: プロトタイプ開発（とにかく早く動くものを作りたい）

• ✅ 選択: react-use
• 理由: 多様なフックがすぐに使えるため、迅速な開発が可能。型安全性よりも開発速度を優先する場合に適しています。

シナリオ3: 小規模アプリ（シンプルで信頼性重視）

• ✅ 選択: usehooks-ts 単体
• 理由: 必要なユーティリティフックが揃っており、型安全で安定しているため、過剰な依存を避けられます。

📊 機能比較表

💡 最終的なアドバイス

• データフェッチが必要なら、迷わず react-query を使ってください。これは現代のReact開発における事実上の標準です。
• 汎用ユーティリティフックが必要なら、TypeScriptプロジェクトでは usehooks-ts、JavaScript中心なら react-use を選ぶのが無難です。
• beautiful-react-hooks と react-async-hook は、特殊な事情がない限り新規プロジェクトで使うべきではありません。既存コードに使われている場合は、段階的に置き換えることを検討しましょう。

これらのライブラリは互いに排他的ではなく、react-query（データ）＋ usehooks-ts（ユーティリティ）という組み合わせが、多くのプロダクションアプリケーションで最適なバランスを提供します。