Zenn
🐈

Reactの便利なuseEffectついて

に公開
React
frontend
useEffect
tech

useEffectとは？

  • 副作用（状態保持以外の処理）を行うフックです

どのようなことができるか？

初回マウント時の処理を書くことができる

useEffect(() => {
  console.log("初回だけ実行");
}, []);

値が変わったときの処理を書ける

useEffect(() => {
  console.log(`countが変化: ${count}`);
}, [count]);

外部リソースとのやり取り

APIフェッチ、WebSocket、外部ライブラリの初期化などができる

useEffect(() => {
  fetch("/api/data").then(res => res.json()).then(setData);
}, []);

環境やブラウザの操作

DOM操作、document.title 更新、localStorage 読み書きなど

useEffect(() => {
  document.title = `カウント: ${count}`;
}, [count]);

継続処理とクリーンアップ
タイマーやイベントリスナーを設定し、不要になったら解除できる

useEffect(() => {
  const id = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(id); // 後始末
}, []);

↓

どうしてuseEffect内でその処理をするべきなのか？

React のレンダータイミングと合わせるため

  • React は レンダー（描画）処理 → その後に副作用処理 という流れを持っています。
  • もし関数コンポーネントの本体に直接 fetch や document.title を書くと…
    • 毎回レンダーのたびに実行される
    • 無限ループの原因になりやすい
// ❌ 毎回レンダーで走ってしまう
const Comp = ({ count }) => {
  document.title = `カウント: ${count}`;
  return <div>{count}</div>;
};

どうゆう時に有用か？

  • 初回だけ実行したい処理

    （例: コンポーネントが画面に出た瞬間に何かする）

  • 値が変化したタイミングで実行したい処理

    （例: 依存している状態やpropsが更新されたときに追加処理をしたい）

  • 外部とつながる処理

    （例: API呼び出し、WebSocket接続、外部ライブラリの初期化）

  • ブラウザや環境を操作する処理

    （例: document.title の変更、localStorage の読み書き、イベントリスナーの登録）

  • 継続的な処理の開始と終了を制御する処理

    （例: タイマー開始 → コンポーネントが消える時にタイマー解除）

  • リソースの後片付けが必要な処理

    （例: イベントリスナー削除、購読解除、接続終了など）

ここまで見ていただきありがとうございます！、もし間違いや不足があれば教えていただけると助かります！

Discussion