useEffectと副作用

なぜ学ぶか： useEffectは、Reactの中でもつまずきやすいフックです。使いどころは「画面を出したあとに、外の世界とやり取りする」こと。AIもここをよく間違えるので、「このuseEffect、本当に必要？」と気づけるようになるのがゴールです。

まずはこの例を見てみましょう

function Clock() {
  const [now, setNow] = useState(new Date());

  useEffect(() => {
    // 画面を出したあと、1秒ごとに時刻を更新するタイマーを動かす
    const timer = setInterval(() => setNow(new Date()), 1000);

    // 後片付け: 画面が消えるときにタイマーを止める
    return () => clearInterval(timer);
  }, []); // ← [] は「最初の1回だけ動かす」という意味

  return <p>現在時刻: {now.toLocaleTimeString()}</p>;
}

「画面を出したあとにタイマーを動かし、消えるときに止める」— useEffectの典型的な使い方です。