useEffect

公式ドキュメント ↗

useEffect(() => {
  connect(roomId);
  return () => disconnect(roomId); // roomIdが変わる直前 & アンマウント時に実行
}, [roomId]);

依存配列によって、実行されるタイミングが変わる

useEffect(() => { ... });            // A: 依存配列なし → 毎レンダー後
useEffect(() => { ... }, []);        // B: 空配列       → マウント時だけ
useEffect(() => { ... }, [count]);   // C: [count]      → countが変わった時だけ

依存配列は「このEffectが気にしている値」の宣言。書いた値が変わらない限り、Reactは前回の結果をそのまま使い、無駄な再実行をしない。ただしAのように依存配列なしでsetStateを無条件に呼ぶと、実行→画面が描き直される→また実行…と無限ループになるので要注意。

実際の使いどころ: ブラウザの機能と足並みを揃える

useEffect(() => {
  const onResize = () => setWidth(window.innerWidth);
  window.addEventListener("resize", onResize);
  return () => window.removeEventListener("resize", onResize);
}, []);

ブラウザの幅はReactの外側にある値。useEffectで購読して、変化するたびにstateへ反映している(ウィンドウ幅を変えてみてください)。DOM操作、タイマー、WebSocket、ブラウザAPIなど「Reactが知らない外の世界」とコンポーネントを同期させるのがuseEffectの本来の役割。