こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお話ししたいテーマがあります。Reactを触り始めて誰もが一度は「あれ？なんでこんな動きするの？」と頭を抱える場所……そう、`useEffect`という魔法の道具についてです。
特に「副作用の条件付き実行」、つまり「特定の条件のときだけ何かを実行したい」という場面。ここをマスターすると、あなたの書くコードは一気にプロの風格を帯びてきます。肩の力を抜いて、一緒に見ていきましょう。
—
`useEffect`は「自動ドアのセンサー」だと思ってください
まず、`useEffect`の本質を捉えましょう。これは「Reactが何かを画面に描画したあとに、こっそり裏で動いてくれる執事さん」です。
でも、執事さんに「とりあえず毎回何かやって！」と頼むと、彼らは律儀すぎて、画面が再描画されるたびに何度でも同じことを繰り返してしまいます。これでは大忙しですよね。そこで私たちが「こういう時だけやってね」とルールを決めてあげる必要があるんです。
—
パターン1：中身で「if文」を書く（現場の現実）
一番シンプルで、ついついやってしまいがちなのが「`useEffect`の中身で`if`文を書く」という方法です。
useEffect(() => {
// 画面が更新されるたびに、この箱の中身は毎回チェックされます
if (isLoggedIn) {
console.log(“ログイン中ですね、データを取得します！”);
// データを取得する処理…
}
}, [isLoggedIn]); // 依存配列にログイン状態を指定
ここでのポイント：
これは決して間違いではありません。ですが、もし`useEffect`の中で「ログインしている時」と「そうでない時」で全く別のことをしたくなったらどうでしょう？ コードがどんどん長くなって、何をしているのか分からなくなってしまいます。
「if文の迷路」に入り込みそうになったら、一度立ち止まる合図です。
—
パターン2：依存配列を「スイッチ」として使う
Reactの`useEffect`の最後にある「`[]`（依存配列）」は、いわば「執事さんが反応するスイッチ」です。
- `[]`が空っぽなら：最初の一回だけ仕事をする「職人タイプ」
- `[user]`なら：`user`が変わった時だけ仕事をする「変化に敏感なタイプ」
もし、特定のデータが変わった時だけ動かしたいなら、`if`文でごちゃごちゃ書くのではなく、依存配列にそのデータをポンと放り込んであげるのが、React流の美しい書き方です。
悪い例：なんでもかんでも中に入れる
useEffect(() => {
// 依存配列が空だと、何が変わっても毎回ここを見に来てしまう
// 結局中で「これ変わったかな？」とif文で確認するハメに…
}, []);
良い例：必要な時だけ呼び出す
useEffect(() => {
// ここには「実行したい処理」だけを書く。シンプル！
fetchUserData(userId);
}, [userId]); // userIdが変わった時だけ、この箱を開ける
—
つまずきポイント：依存配列を忘れる「幽霊バグ」
よくあるのが、「依存配列を書き忘れる」あるいは「空にしてしまう」ミスです。これをしてしまうと、Reactは「いつ動けばいいか分からないから、とりあえず全部のタイミングで動く！」という暴走状態になります。
これを私は「幽霊バグ」と呼んでいます。画面が勝手に更新されたり、APIを叩きすぎてサーバーに怒られたり……。
もし「あれ？なんか動きがおかしいな」と思ったら、まずは`useEffect`の最後の`[]`を見てみてください。そこに「この処理が影響を受けるデータ」はちゃんと入っていますか？
—
最後に：完璧を目指さなくて大丈夫
「条件分岐が複雑すぎて、どこに何を書けばいいか分からない……」という悩み、実は経験豊富なエンジニアでも抱えることがあります。
そんなときは、無理に一つの`useEffect`に詰め込まず、「処理を分ける」という勇気を持ってください。
- ログイン状態を監視する`useEffect`
- データを取得する`useEffect`
これらを分けて書くことは、決して「コードが長いから悪い」ということではありません。「責務を分ける」という、とても賢い設計判断なのです。
Reactは、あなたの思考を整理するための道具です。最初は難しく感じるかもしれませんが、今日お話しした「執事さんの動くタイミングを配列で管理する」ということさえ意識できれば、もう怖くありません。
ゆっくり、一歩ずつ。あなたの書くコードが、誰かの役に立つ素晴らしいものになることを応援しています！また何かあれば、いつでも聞きに来てくださいね。
コメント