1. APIキャッシュのメリット

APIからデータを取得すると、ネットワーク通信が発生します。通信が多いとアプリが遅くなったり、サーバーに負担がかかります。
カスタムフックでキャッシュを作ると、取得したデータを保存して再利用できるため、パフォーマンスが向上します。初心者でも簡単に導入できます。

2. カスタムフックでAPIキャッシュを作る方法

まず、useStateとuseEffectを使ってカスタムフックを作ります。APIキャッシュ用のオブジェクトを使って、データを保持します。


import { useState, useEffect } from "react";

const cache = {};

function useApiCache(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (cache[url]) {
      setData(cache[url]);
      setLoading(false);
      return;
    }

    setLoading(true);
    fetch(url)
      .then((res) => res.json())
      .then((json) => {
        cache[url] = json;
        setData(json);
      })
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

export default useApiCache;

このフックでは、cacheオブジェクトにURLごとのデータを保存しています。
すでにキャッシュがあればAPIにアクセスせず、即座にデータを返します。
エラーやロード状態も管理できるため、UIに反映しやすくなります。

3. カスタムフックを使ったコンポーネント例

次に、作ったカスタムフックを使ってデータを表示する例です。


import React from "react";
import useApiCache from "./useApiCache";

function ApiDemo() {
  const { data, loading, error } = useApiCache(
    "https://jsonplaceholder.typicode.com/todos/1"
  );

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました</p>;

  return (
    <div>
      <h3>TODOデータ</h3>
      <p>ID: {data.id}</p>
      <p>タイトル: {data.title}</p>
      <p>完了: {data.completed ? "はい" : "いいえ"}</p>
    </div>
  );
}

export default ApiDemo;

（画面に「読み込み中...」と表示され、データ取得後にTODO情報が表示されます。再度同じURLを使うとAPI呼び出しは行われません）

このようにカスタムフックを使うと、APIキャッシュが簡単に実装でき、アプリのパフォーマンスを向上させることができます。

4. カスタムフック活用のポイント

キャッシュはオブジェクトやMapで管理すると便利
URLやパラメータごとにデータを保存する
読み込み中やエラー状態もフック内で管理するとコンポーネントがスッキリする
複数のコンポーネントで同じデータを再利用できる

これらのポイントを意識するだけで、ReactアプリのAPI通信を効率化し、ユーザーに快適な体験を提供できます。

5. 応用例：複数APIのキャッシュ

複数のAPIをキャッシュしたい場合も、同じカスタムフックを使い回すことができます。URLごとにキャッシュを分けることで、必要なデータだけ効率的に取得できます。

まとめ

ReactカスタムフックとAPIキャッシュの全体像を振り返る

ここまで、Reactのカスタムフックを使ってAPIキャッシュ処理を行う方法について、基本的な考え方から実装例、そして活用のポイントまで順を追って解説してきました。 ReactでAPI通信を行う際、多くの初心者が最初につまずくのが「同じデータを何度も取得してしまう」という問題です。画面遷移のたびにAPI通信が発生すると、表示が遅くなったり、ネットワーク負荷が増えたりと、ユーザー体験に影響が出やすくなります。

そこで役立つのが、カスタムフックを使ったAPIキャッシュの仕組みです。一度取得したデータをアプリ内で保持しておき、同じURLや条件で再度データが必要になった場合は、新しく通信を行わずにキャッシュから即座にデータを返します。この仕組みを取り入れることで、Reactアプリの表示速度が安定し、無駄な通信を減らしながら、シンプルなコンポーネント設計を保つことができます。

useStateとuseEffectを組み合わせた設計の重要性

記事の中で紹介したカスタムフックでは、 useStateでデータ・ローディング状態・エラー状態を管理し、 useEffectでAPI通信のタイミングを制御しました。この構成は、React Hooksを使った非同期処理の基本形とも言えるものです。初心者の方は、まず「状態はuseStateで持つ」「副作用はuseEffectで処理する」という役割分担をしっかり理解することが大切です。

キャッシュが存在する場合は通信処理をスキップし、すぐに状態を更新するという分岐を入れることで、 Reactの再レンダリングの仕組みも自然に理解できるようになります。この考え方は、APIキャッシュだけでなく、ローディング管理や入力フォームの制御など、さまざまな場面で応用できます。

シンプルなサンプルで復習する

最後に、この記事で学んだ内容をシンプルに振り返るためのサンプル例を見てみましょう。 APIキャッシュの仕組みを使うことで、同じデータ取得が繰り返されないことを意識してみてください。


import React from "react";
import useApiCache from "./useApiCache";

function SummarySample() {
  const { data, loading } = useApiCache(
    "https://jsonplaceholder.typicode.com/todos/1"
  );

  if (loading) {
    return <p>読み込み中...</p>;
  }

  return (
    <div>
      <p>ID: {data.id}</p>
      <p>タイトル: {data.title}</p>
    </div>
  );
}

export default SummarySample;

（最初は読み込み中と表示され、データ取得後に内容が表示されます。同じURLでは再通信されません）

このようなシンプルな構成でも、カスタムフックを使うことで、コンポーネント側の記述はとても読みやすくなります。データ取得のロジックをフックにまとめることで、表示に集中したコンポーネント設計ができる点も大きなメリットです。

先生と生徒の振り返り会話

生徒

「カスタムフックを使うと、APIキャッシュの処理を一か所にまとめられるんですね。コンポーネントがすごくスッキリしました。」

先生

「その通りです。Reactでは表示と処理を分けて考えるのが大切です。カスタムフックは、その考え方を自然に身につけるための良い練習になります。」

生徒

「キャッシュがあると、同じデータを何度も取りに行かなくて済むので、アプリが軽く感じられる理由も分かりました。」

先生

「そうですね。API通信、ローディング管理、キャッシュの考え方は、実務でも頻繁に使われます。今回学んだ内容を土台に、もっと大きなReactアプリにも挑戦してみてください。」

今回のまとめとして、Reactのカスタムフックを使ったAPIキャッシュ処理は、初心者から実務レベルまで幅広く役立つ重要なテーマです。基本を丁寧に理解し、少しずつ応用していくことで、保守性が高く、使いやすいReactアプリを作れるようになります。