useEffect とは何で、いつ実行されますか？

Question

Accepted Answer

`useEffect` は **side effect** を実行します。data fetching、subscription、timer、手動 DOM 更新のように、React の rendering の外側へ到達する処理です。component が render された**後**に実行され、render body から side effect を分離します（render は pure であるべきです）。

## dependency array が実行タイミングを制御する

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → 初回 render 後と、`count` が変わったときに実行される。
- **`[]`**（空） → mount 後に**一度だけ**実行される（一度だけの setup に向いている）。
- **省略** → **毎回** render 後に実行される（望ましいことは少ない）。

## cleanup: 関数を返す

effect が後始末を必要とするものを setup する場合は、cleanup 関数を返します。React は次の effect 実行前と component unmount 時にそれを呼びます。

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → timer leak を防ぐ
}, []);
```

## cleanup が重要な理由

cleanup がないと、再実行のたびに timer/subscription が追加され、古いものが削除されません。これは典型的な memory leak です。`[dep]` effect の lifecycle は、*effect 実行 →（dep 変更）→ cleanup 実行 → effect 再実行* です。

**Tip:** render 中に計算できるものには effect を使わないでください（derive する）。また、effect が読むすべての値を dependency array に含めてください（`react-hooks/exhaustive-deps` lint rule が役立ちます）。