【React】エフェクトとは何か？useEffectフックの使い方や副作用(Side Effect),クリーンアップを実例で解説

useEffect(副作用を持つ関数, [依存配列])

import { useState, useEffect } from 'react';

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

  // 1. 基本的な useEffect の使用
  useEffect(() => {
    // ここに実行したい副作用（エフェクト）のコードを書く
    document.title = `Count: ${count}`; // 例: ブラウザのタイトルを更新
    console.log('エフェクトが実行されました');
  }, [count]); // 依存配列: count が変化した時のみ再実行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // ユーザーID（props）が変更されるたびにデータを取得するエフェクト
  useEffect(() => {
    // データを取得する関数を定義
    const fetchUserData = async () => {
      setIsLoading(true); // ロード開始

      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (error) {
        console.error("データ取得エラー:", error);
        setUser(null);
      } finally {
        setIsLoading(false); // ロード完了
      }
    };

    fetchUserData(); // 実行

    // クリーンアップは不要（データ取得は一回きりの副作用のため）

  }, [userId]); // 依存配列: userId が変わったら再実行

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (!user) {
    return <p>User not found.</p>;
  }

  return (
    <div>
      <h3>{user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

useEffect(() => {
  //副作用を伴う処理

  // クリーンアップ関数をreturnで返す
  return () => {
    // クリーンアップの処理
  };
}, []); // 依存配列

import { useState, useEffect } from 'react';

//このコンポーネントが画面から消えると、クリーンアップが走る
function TimerDisplay() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 副作用：タイマー（外部のブラウザAPI）を設定
    const timerId = setInterval(() => {
      // 1秒ごとに実行される処理
      setSeconds(prev => prev + 1);
      console.log('タイマーが動いています...');
    }, 1000);

    // クリーンアップ関数を返す
    return () => {
      clearInterval(timerId); // 外部で動き続けているタイマーを停止する
      console.log('タイマーを停止しました！メモリリーク防止完了。');
    };
  }, []); // 依存配列が空なので、初回マウント時のみ実行

  return (
    <div>
      <h3>経過時間: {seconds}秒</h3>
    </div>
  );
}