【2024完全版】useEffectに書いた処理が実行されるタイミング

useEffectの実行タイミング 🕒

サンプルコードを用いて実行タイミングを解説していきます👍

📌 サンプルコード

useEffect(() => {
  // ここに書かれる処理がコールバック関数
  console.log('コールバック関数が実行されました');
  return () => {
    // ここに書かれる処理がクリーンアップ関数
    console.log('クリーンアップ関数が実行されました');
  };
}, [some]); // 👈 この配列が"依存配列"

🔄 実行されるタイミング

1. 初期レンダリング後

• ✅コールバック関数のみ実行される
  　
• 出力結果

  コールバック関数が実行されました
  

2.依存配列の変数が変更されたとき

• ✅ クリーンアップ → コールバックの順序で実行される
  　
• 出力結果

  クリーンアップ関数が実行されました
  コールバック関数が実行されました
  

3. アンマウント時

• ✅ クリーンアップ関数のみ実行される
  　
• 出力結果

  クリーンアップ関数が実行されました
  

🛠 開発環境での特殊な挙動

開発環境では Strict Mode により初期レンダリング後のみ挙動が通常と異なります
※ Reactの開発環境はデフォルトで Strict Mode が有効（変更可能）になっている

開発環境における初期レンダリング後の実行順序

前述した「1. 初期レンダリング後」の挙動は開発環境では下記になります📝

1. コールバック関数が実行される
2. 直後にクリーンアップ関数が実行される
3. コールバック関数が実行される

• 出力結果

  コールバック関数が実行されました
  クリーンアップ関数が実行されました
  コールバック関数が実行されました
  

終わりに

ここまで読んだあなたは完璧です。以上。