Reactを学んでいると、
「useEffectって結局いつ使うの？」
「正直よく分からない…」
と感じることが多かった。（私の理解力問題も有…）
結論から言うと、useEffectの使用場面ははっきりしているようです。
この記事では、useEffectの役割を
私がこれで理解できたいう目線で整理してみました。
💡useEffectとは何か？
一言で言うと
stateやpropsの処理が変わった「あと」に、
Reactの外の処理を実行する仕組み
です。
ポイントは 「あと」です。
💡useEffectが動く順番
① state が変わる
② 再レンダリングされる
③ その後に useEffect が実行される
👉 render中には動かない
👉 画面が更新された「結果」として動く
💡「条件下で発火する」の正体
① 依存配列による条件
useEffect(() => {
console.log(count);
}, [count]);
👉count が変わったときだけ実行される
② effect内の if 条件
useEffect(() => {
if (count > 5) {
alert('多い！');
}
}, [count]);
👉条件を満たした場合のみ処理が走る
💡useEffectを使う具体的な場面
① 初回表示時に何かしたいとき
- API通信
- 初期データ取得
- 外部ライブラリ初期化
useEffect(() => {
fetchData();
}, []);
② stateやpropsの変化「後」に処理したいとき
- 検索条件が変わったら再検索
- 値が変わったら保存
useEffect(() => {
save(count);
}, [count]);
③ Reactの外とやり取りするとき
- localStorage
- setInterval / setTimeout
addEventListener
useEffect(() => {
localStorage.setItem('count', count);
}, [count]);
✅️初学者が混乱しやすいポイント整理
- useEffectは頻繁に使うものではない
- ロジックの中心に置くものではない
- 「とりあえず書くもの」ではない
💡迷ったときの判断基準
「それ、render中にやったら怒られない？」
❗️API通信 → 怒られる → useEffect
❗️DOM操作 → 怒られる → useEffect
❗️計算・表示 → 怒られない → 不要
📖まとめ
- useEffectはstate変更と同時に動くものではない
- state変更の「結果」として後から動く
- Reactだけで完結しない処理のための仕組み
useEffectは
「どうしても必要になったときに使う脇役」
という認識でも問題ないと思います！
実際の使用場面が出てきたらまた書き残して行こうと思います。