useEffect 完全入門【React】副作用処理をやさしく解説

useEffect(setup関数, 依存配列);

import { useEffect } from "react";
 
function MyComponent() {
  useEffect(() => {
    // ここに副作用の処理を書く
    console.log("コンポーネントが表示されました！");
 
    // クリーンアップ関数（省略可能）
    return () => {
      console.log("コンポーネントが消えました！");
    };
  }, []); // 依存配列
 
  return <div>Hello!</div>;
}

useEffect(() => {
  console.log("初回表示のときだけ実行");
}, []); // ← 空配列

useEffect(() => {
  console.log(`userIdが変わった: ${userId}`);
}, [userId]); // ← 監視したい値を入れる

useEffect(() => {
  console.log("毎回のレンダリング後に実行");
}); // ← 第2引数を省略

useEffect(() => {
  // セットアップ
  const timerId = setInterval(() => {
    console.log("1秒経過");
  }, 1000);
 
  // クリーンアップ（コンポーネントが消えるとき・再実行前に呼ばれる）
  return () => {
    clearInterval(timerId); // タイマーを解除する
  };
}, []);

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    setLoading(true);
 
    fetch(`https://api.example.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]); // userIdが変わったら再取得
 
  if (loading) return <p>読み込み中...</p>;
  return <h1>{user.name}</h1>;
}

function WindowSize() {
  const [width, setWidth] = useState(window.innerWidth);
 
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
 
    // イベントリスナーを登録
    window.addEventListener("resize", handleResize);
 
    // クリーンアップで必ず解除する
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // 初回のみ登録でOK
 
  return <p>画面幅: {width}px</p>;
}

function ArticlePage({ title }) {
  useEffect(() => {
    document.title = `${title} | My Blog`;
 
    // ページ離脱時にタイトルを元に戻す
    return () => {
      document.title = "My Blog";
    };
  }, [title]);
 
  return <h1>{title}</h1>;
}

// NG：stateを依存配列に入れて、そのstateをエフェクト内で更新している
useEffect(() => {
  setCount(count + 1); // countが変わる → エフェクト再実行 → 無限ループ！
}, [count]);

// OK：関数形式を使えばcountを依存配列に入れなくていい
useEffect(() => {
  const timerId = setInterval(() => {
    setCount((prev) => prev + 1); // 前の値を受け取る形式
  }, 1000);
  return () => clearInterval(timerId);
}, []); // 依存配列が空でOK

// NG：optionsはレンダリングのたびに新しいオブジェクトが作られる
function MyComponent({ options }) {
  useEffect(() => {
    doSomething(options);
  }, [options]); // 毎回再実行されてしまう
}

// OK：具体的な値を指定する
useEffect(() => {
  doSomething({ size: options.size, color: options.color });
}, [options.size, options.color]); // 特定のプロパティを指定

// 開発環境での実行順序
// 1. セットアップ実行
// 2. クリーンアップ実行（Strict Modeによる検査）
// 3. セットアップ実行（本来の実行）

// ❌ NG：propsからstateを計算するだけならuseEffectは不要
useEffect(() => {
  setFullName(firstName + " " + lastName);
}, [firstName, lastName]);
 
// ✅ OK：レンダリング中に直接計算する
const fullName = firstName + " " + lastName;