問題一覧に戻る
中級カスタムフック
問題55: useFetch

データ取得を抽象化するカスタムフックの実装を学びます。API通信のローディング状態、エラーハンドリング、データ管理を一元化します。URLをパラメータとして受け取り、データとローディング状態を返します。このパターンにより、データ取得ロジックをコンポーネントから分離でき、再利用性とテスタビリティが向上します。実際のアプリケーションでは、エラー処理やキャッシュ機能も追加して拡張できます。

import React, { useState, useEffect } from 'react';

{/* データ取得カスタムフック */}
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    {/* データをフェッチ */}
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData();
        setLoading();
      });
  }, [url]);
  
  return { , loading };
}

function App() {
  {/* useFetchフックを使用 */}
  const { data, loading } = ('/api/user');
  
  if (loading) return <p>Loading...</p>;
  return <p>{data?.name}</p>;
}

export default App;
···