🏁 はじめに

Reactを学び始めたとき、「useEffectっていつ動くの？」「依存配列ってなに？」と思ったことはありませんか？
useEffectはReact開発で最も重要なフックの一つですが、最初に理解しづらいポイントでもあります。

この記事では、初心者の方に向けて👇のようにステップ形式で解説します。

1️⃣ useEffectの基本構文
2️⃣ 依存配列の動作を図で理解
3️⃣ クリーンアップ関数の役割
4️⃣ 実践例（API取得）
5️⃣ カスタムフック化で再利用

💻 前提条件

React（Hooks）の基礎を知っている
useStateを使ったことがある
開発環境（Vite / CRA）が用意できる

🎯 今回の目標

この記事を読み終えると、次のことができるようになります👇

✅ useEffectの役割を説明できる
✅ 依存配列の動きを理解できる
✅ クリーンアップ関数を正しく使える
✅ カスタムフックに発展できる

⚙️ useEffectとは？

useEffectは、 レンダーとは直接関係のない「副作用処理（Side Effect）」 を行うためのフックです。

たとえば…

API通信
イベントリスナー登録
タイマー
DOM操作

これらは「副作用」にあたります。

🧩 基本構文

jsx

useEffect(() => {
  // 実行したい処理

  return () => {
    // クリーンアップ処理（後片付け）
  };
}, [依存配列]);

🧠 第2引数（依存配列） が重要！

ここに指定した値が変化したときのみ再実行されます。

空配列[]なら「初回のみ」実行。

📘 基本例：マウント時だけ実行

import { useEffect } from "react";

function HelloEffect() {
  useEffect(() => {
    console.log("コンポーネントがマウントされました！");
  }, []);

  return <h1>Hello useEffect!</h1>;
}

🟢 ポイント

依存配列が空 → コンポーネント表示時に一度だけ実行。

componentDidMountと同じ動きです。

🔁 【図解】依存配列の仕組みを理解しよう

コード例

useEffect(() => {
  console.log("countが変化しました！");
}, [count]);

図で見る依存配列の動き

🧩 動きの流れ

初回レンダーで実行される
countが更新されると再度実行
countが変わらなければ再実行されない

👉 無駄な再レンダーを防ぎ、パフォーマンスを保つために依存配列が重要！

🧹 クリーンアップ関数とは？

useEffectの中で返す関数は、 アンマウント時や再実行前に呼ばれる「後片付け処理」 です。

例：タイマーやイベントリスナーの解除など。

import { useEffect, useState } from "react";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("タイマー開始");
    const timer = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    return () => {
      console.log("タイマー停止");
      clearInterval(timer);
    };
  }, []);

  return <p>経過秒数: {count}</p>;
}

🧠 イメージ

returnで返した関数が「片付け係」

再レンダーや削除時に呼ばれて、不要な処理を止める

🌐 実践例：APIからデータを取得する

import { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const data = await res.json();
      setUsers(data);
    }
    fetchUsers();
  }, []);

  return (
    <div>
      <h2>ユーザー一覧</h2>
      <ul>
        {users.map((u) => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </div>
  );
}

🟢 ポイント

データ取得などの「副作用」はuseEffect内で行う
空の依存配列[]で「初回のみ」取得

https://jsonplaceholder.typicode.com/users
上記から得られるデータは、JSONPlaceholder という無料のオンラインREST API サービスが提供しているサンプルデータになります。

🧩 応用：カスタムフック化で再利用！

useEffectを使ったデータ取得を、カスタムフックにまとめることで再利用できます。

🧩 カスタムフックとは？

Reactの既存フック（useState, useEffect, useContext など）を組み合わせて自分専用のフックを作る仕組みです。

🧠 ルール

カスタムフックには2つの基本ルールがあります。

関数名は 「use」 から始めること
　例：useFetch, useAuth, useLocalStorage
Reactフックを内部で使うことができる
　useState, useEffect, useMemoなどを自由に組み合わせられます。

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(url);
      const json = await res.json();
      setData(json);
    };
    fetchData();
  }, [url]);

  return data;
}

export default function App() {
  const users = useFetch("https://jsonplaceholder.typicode.com/users");

  if (!users) return <p>読み込み中...</p>;

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

🧠 メリット

同じロジックを複数コンポーネントで使える
コードがスッキリする
テスト・保守が簡単になる

⚠️ よくある落とし穴

❌ 無限ループに注意！
useEffect(() => {
setCount(count + 1);
}, [count]);

↑ countを更新 → useEffect再実行 → count更新… の繰り返し！

💡 対策

更新処理をuseEffectの外に出す
依存配列を正しく指定

🧭 まとめ

状況	依存配列	動作
初回だけ実行	`[]`	マウント時のみ
値が変わるたび実行	`[依存配列]`	依存値の変化時
常に実行（非推奨）	省略	毎レンダー
クリーンアップ	`return () => {...}`	再実行前・削除時

✨ 最後に

　最初は少し難しく感じるかもしれませんが、「いつuseEffectが実行されるか」を意識することが理解の第一歩です。
　最後までご覧いただきありがとうございます。今後も少しずつ勉強記録も兼ねて投稿していきますので、よろしくお願いします。