useEffect

useEffect(() => {
  // 副作用
  return () => { /* クリーンアップ */ };
}, [dep1, dep2]);

import { useState, useEffect } from 'react';

// ── 基本: コンポーネント表示時に1回だけ実行 ─────────
function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 第2引数が [] → マウント時（初回表示時）に1回だけ実行
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []); // ← 空配列 = 「依存なし = 最初の1回だけ」

  return <div>{data ? JSON.stringify(data) : '読込中...'}</div>;
}

// ── 依存配列に値を指定: 値が変わるたびに実行 ─────────
function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // userId が変わるたびに新しいユーザーを取得
    async function fetchUser() {
      const res = await fetch(`/api/users/${userId}`);
      const data = await res.json();
      setUser(data);
    }
    fetchUser();
  }, [userId]); // ← userId が変わったら再実行

  return <p>{user?.name}</p>;
}

// ── クリーンアップ関数: タイマーやイベントの後片付け ─
function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // タイマーを開始
    const id = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // return した関数が「クリーンアップ」= コンポーネント消滅時に実行
    // ⚠️ これを忘れるとメモリリークの原因になる！
    return () => clearInterval(id);
  }, []); // マウント時に開始、アンマウント時に停止

  return <p>{seconds}秒経過</p>;
}