useEffectは、Reactコンポーネント内で副作用を追加するフックです。

useEffectの副作用とは

Reactコンポーネント内で何かを行う特定のアクションや処理のことです。たとえば、APIからデータを取得したり、ボタンがクリックされたときにメッセージを表示することが副作用の例です。コンポーネントが読み込まれたりアップデートされたりしたときに、コンポーネント内で何か特別なことを行うための「仕掛け」や「タスク」のようなものです。

• APIからデータを取得
• DOM要素の変更
• 非同期処理

といったときにもuseEffectを実行することができます。

useEffectの副作用を実行するタイミング

コンポーネントのライフサイクル内の特定のタイミングで実行することができます。具体的には以下です。

• コンポーネントが初めて描画された後（コンポーネントが "マウント" された後）
• 特定の状態が変更された後（コンポーネントが "アップデート" された後）
• コンポーネントがアンマウント（削除）される前

useEffectの書き方

useEffectの基本的な構文は以下の通りです。

useEffect(() => {
  // 副作用を実行するコード
}, [引数1, 引数2]);

ここで、第1引数には副作用を実行する関数が入ります。第2引数には、副作用が実行されるタイミングを制御するための情報を指定します。もし何も指定しない場合、useEffectは毎回のレンダリングで実行されます。空の配列（[]）を指定すると、初回のレンダリング時のみ実行され、依存する変数を指定すると、その変数が変更されたときに再実行されます。

例えば、以下のようなコードは、コンポーネントが初めて描画された後にAPIからデータを取得する副作用を示しています。

import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // コンポーネントがマウントされた後に実行される副作用
    axios.get("https://api.example.com/data")
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
      });
  }, []); // 空の配列: 初回のみ実行

  return (
    <div>
      {/* データを表示 */}
    </div>
  );
}

export default App;

この例では、useEffectはコンポーネントが初めて描画された後に、指定したURLからデータを取得してステートに保存します。