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の読み書き、イベントリスナーの登録） -
継続的な処理の開始と終了を制御する処理
（例: タイマー開始 → コンポーネントが消える時にタイマー解除）
-
リソースの後片付けが必要な処理
（例: イベントリスナー削除、購読解除、接続終了など）
ここまで見ていただきありがとうございます！、もし間違いや不足があれば教えていただけると助かります！