Reactでカスタムフックを使ってAPIからデータを取得する方法

Reactは、APIからデータを取得するための多くの方法を提供しています。しかし、同じコンポーネントで複数のAPI呼び出しを行う場合、コンポーネントが複雑になり、再利用性が低下する可能性があります。ここで、カスタムフックを使うことで、コンポーネントの再利用性を高め、API呼び出しのロジックを分離することができます。

カスタムフックとは何ですか？

カスタムフックとは、Reactのフックを組み合わせて、コンポーネントで共通のロジックを再利用可能な関数にまとめたものです。これにより、同じロジックを複数のコンポーネントで使い回すことができます。

カスタムフックを使ってAPIからデータを取得する方法

以下の手順に従って、カスタムフックを使ってAPIからデータを取得する方法を説明します。

ステップ1：useEffectを使ってAPIを呼び出す

まず、useEffectフックを使ってAPIからデータを取得します。useEffectは、コンポーネントがマウントされた後、更新された後、アンマウントされる前など、コンポーネントのライフサイクルの中で特定のタイミングで副作用を発生させるために使用されます。

import { useState, useEffect } from "react";

export function useFetchData(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
    }

    fetchData();
  }, [url]);

  return data;
}

ステップ2：カスタムフックを作成する

次に、API呼び出しのロジックを分離するためのカスタムフックを作成します。このフックは、APIのURLを引数として受け取り、データを返します。

import { useState, useEffect } from "react";

export function useFetchData(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
    }

    fetchData();
  }, [url]);

  return data;
}

ステップ3：カスタムフックを使ってデータを取得する

最後に、作成したカスタムフックを使ってデータを取得します。以下の例では
、APIから取得したユーザーのリストを表示するコンポーネントを作成しています。

import { useFetchData } from "./useFetchData";

function UserList() {
  const users = useFetchData("https://jsonplaceholder.typicode.com/users");

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

export default UserList;

このように、カスタムフックを使うことで、API呼び出しのロジックを分離し、コンポーネントの再利用性を高めることができます。

まとめ

Reactのカスタムフックを使ってAPIからデータを取得する方法を紹介しました。カスタムフックを使うことで、コンポーネントの再利用性を高め、API呼び出しのロジックを分離することができます。このようなカスタムフックを使って、Reactアプリケーションの開発をより効率的に行うことができます。