カスタムフックを使ったAPIの実装

ReactアプリでAPI通信を行う際、各コンポーネントにfetchやaxiosを直接記述すると、処理が分散してしまい保守が困難になります。
これを解決する方法が「カスタムフックの利用」です。

本記事では、API通信処理をカスタムフックに切り出すパターンを紹介します。

🔧 基本構造：useFetchUsers.ts

以下はユーザー一覧を取得する例です。

// hooks/useFetchUsers.ts
import { useEffect, useState } from 'react';
import axios from 'axios';

export const useFetchUsers = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<null | string>(null);

  useEffect(() => {
    axios
      .get('/api/users')
      .then((res) => setUsers(res.data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  return { users, loading, error };
};

💡 実際の使用例

// components/UserList.tsx
import React from 'react';
import { useFetchUsers } from '../hooks/useFetchUsers';

export const UserList = () => {
  const { users, loading, error } = useFetchUsers();

  if (loading) return 
<p>読み込み中...</p>;
  if (error) return 
<p>エラー: {error}</p>;

  return (

<ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

まとめ

カスタムフックを使うことで、API通信のロジックを見通し良く分離し、再利用可能な構造にできます。

特に以下のような状況で有効です：

• 複数ページで同じデータを使う
• 状態管理ライブラリなしで状態を保持したい
• UIロジックと非同期処理を切り離したい