蝋燭の灯りと窓の外——useEffectで広がる世界｜第7回 React入門

著者: 管理者 / 2025-08-21 (更新: 2025-08-21)

導入

紅茶会のテーブルは、サロンの中だけで完結するものではございませんわ。
蝋燭の炎が窓の外の風に揺らぐように、コンポーネントも外の世界と関わることがあります。

前回までで「状態（State）」という記憶を手に入れました。
今回はその状態の変化にあわせて「外の世界」に働きかける――それを担うのが useEffect（副作用フック） です☕✨

先生……。「副作用」と聞くと、なんだかお薬の注意書きのようで心配になりますわ💊💦

ふふ、ご安心ください。
ここでいう“副作用”とは「UIを描く以外に起こること」を意味します。
たとえば――

- ページのタイトルを書き換える
- データを外から取ってくる
- タイマーを動かす

こうしたものをまとめて扱うのが `useEffect` なのです。

1. useEffectの基本のかたち

📝 解説

useEffect は「コンポーネントが描かれた後に走る処理」を登録する仕組みです。

import { useState, useEffect } from "react";

export default function HelloEffect() {
  const [name, setName] = useState("お嬢様");

  useEffect(() => {
    document.title = `${name}のサロン`; 
  });

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="お名前をどうぞ"
    />
  );
}

入力するたびに name が変わる
そのたびに副作用（document.title の書き換え）が実行される

👉 UIが変わったら“窓の外”にも反映されるイメージです。

まあ！入力欄の内容に合わせて、ブラウザのタイトルまで変わりますのね✨

2. 依存配列で「いつ動くか」を決める

📝 解説

useEffect の第2引数に「依存配列」を渡すことで、いつ動かすかを指定できます。

useEffect(() => {
  console.log("初回だけ呼ばれる");
}, []);

[] ：最初の1回だけ（マウント時）
[name] ：name が変わったときだけ
（省略）：毎回実行

つまり……“どの変化に反応するか”を指定してあげるのですわね。
まるで舞踏会の招待状、宛先を決めるように💌

3. クリーンアップ：お片付けの礼儀

📝 解説

タイマーや購読（subscribe）など、片付けが必要な副作用もあります。
useEffect では「お片付け関数」を返すことで対応します。

useEffect(() => {
  const id = setInterval(() => {
    console.log("ティーカップを揺らす…");
  }, 1000);

  return () => {
    clearInterval(id);
    console.log("お茶会はおひらき☕");
  };
}, []);