先生と生徒の会話形式で理解しよう

生徒

「Reactのカスタムフックを作るときに、依存関係ってどう扱えばいいんですか？」

先生

「依存関係とは、ある処理が別の値や状態に影響を受けることを指します。Reactのカスタムフックでは特に重要な考え方です。」

生徒

「難しそうですが、具体的にはどうやって書けばいいんでしょうか？」

先生

「それでは、依存関係を使ったカスタムフックの実例を見ながら解説していきましょう！」

1. Reactにおける依存関係とは？

依存関係とは「どの値や変数に影響されて処理を再実行するか」という仕組みです。特にReactのuseEffectでは、依存配列というものを設定することで「いつ実行されるか」を制御します。

例えば検索キーワードが変わったときだけAPIを呼び出したい場合、そのキーワードを依存関係に指定します。これにより不要なAPIリクエストを減らせます。

2. カスタムフックで依存関係を管理する意義

カスタムフックは「状態管理」「データ取得」「副作用の管理」をまとめるために使います。依存関係を正しく扱うことで以下のメリットがあります。

必要なタイミングだけデータを再取得できる
不要な再レンダリングを防ぎ、Reactアプリのパフォーマンスを改善できる
処理の流れがわかりやすくなり、コードの保守性が高まる

つまり、依存関係はReactアプリの効率と品質を守る重要な要素です。

3. カスタムフックで依存関係を扱うサンプルコード

次の例では「ユーザーID」が変わったときだけAPIを呼び出してデータを取得するカスタムフックを作ります。


import { useState, useEffect } from "react";

function useUserData(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    if (!userId) return;
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // userIdが依存関係

  return user;
}

export default useUserData;

（このフックは、userIdが変わったときだけAPIを呼び出し、新しいユーザーデータを取得します）

4. コンポーネントで依存関係付きのフックを使う

次に、このカスタムフックを実際のReactコンポーネントで使ってみます。


import React, { useState } from "react";
import useUserData from "./useUserData";

function App() {
  const [id, setId] = useState(1);
  const user = useUserData(id);

  return (
    <div>
      <button onClick={() => setId(id + 1)}>次のユーザー</button>
      {user && (
        <div>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      )}
    </div>
  );
}

export default App;

（ボタンを押すたびにuserIdが更新され、新しいユーザー情報が表示されます）