コンポーネントが初めて画面に表示されたとき（マウント時）に一度だけ処理を実行したい場合、useEffectを使います。依存配列を空にすることで、初回レンダリング時のみ処理が実行されます。

1. 基本的な書き方

import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    console.log("マウント時に一度だけ実行される");
  }, []);

  return 
<div>初回のみ処理を実行</div>;
};

• useEffect(() => {...}, [])：空の依存配列により1回だけ実行
• 再レンダリングでは再実行されません（ただし注意点あり、後述）

2. 親の再レンダリングで再実行されるケース（注意点）

const Child = () => {
  useEffect(() => {
    console.log("Child useEffect 発火");
  }, []);

  return 
<p>子コンポーネント</p>;
};

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <Child />
    </>
  );
};

この場合、Childがアンマウント→マウントし直されるような構造になっていれば、useEffectは再度実行されます。

例：keyが毎回変わるとマウントし直される

<Child key={Math.random()} />

• ↑ のように key が変わると毎回新しいインスタンスとみなされ、useEffect も再実行されます

3. 非同期処理（初回だけAPIなど）

useEffect(() => {
  const load = async () => {
    const res = await fetch("/api/data");
    const json = await res.json();
    console.log(json);
  };

  load();
}, []);

注意点

依存配列を忘れると毎回実行される

// ❌ 毎回再実行される
useEffect(() => {
  console.log("再レンダリングのたびに実行される");
});

• 明示的に初回のみ実行したいときは、必ず空の依存配列 [] を指定してください。

再実行されないようにするためのポイント