こんにちは！Reactの学習、楽しく進めていますか？
画面がスイスイ動くようになってくると、「おっ、自分にも作れるぞ！」という実感が湧いてきてワクワクしますよね。
でも、避けて通れないのが「`useEffect`（ユーゼフェクト）」という、ちょっと名前からして難しそうなやつです。画面が表示された後になにかコソコソ裏で作業してくれる便利なやつなのですが、こいつの「依存配列（いぞんはいれつ）」という設定をうっかり書き忘れると……。
今回は、「依存配列を完全に省略してしまったとき、Reactの裏側で何が起きているのか？」について、身近なたとえ話を交えながら、優しく、そして現場のリアルな目線でお話ししていきますね。
「なんか最近アプリが重いな」「無限ループで画面がフリーズした助けて！」なんて悩みを抱えている方、大丈夫ですよ。今日でスッキリ腑に落ちるように解説しますから、肩の力を抜いて読んでいってくださいね。
—
1. そもそも `useEffect` の依存配列ってなに？
まずは、`useEffect` がどんなものか、イメージしやすくするために身近なものに例えてみましょう。
レストランのホール係を想像してください。
お客さん（Reactのコンポーネント）が席に座ってメニューを開いたり（レンダリング）、お水が減ったりするたびに、ホール係が「何かご入用ですか？」と様子を見に来ます。
このとき、`useEffect` の「依存配列（第2引数の `[]` の部分）」は、いわば「ホール係が様子を見に来る条件（センサー）」のようなものです。
- `[]`（空っぽ）にした場合：「最初にお店に入ってきた時（初回レンダリング時）の一回だけ様子を見るね」
- `[count]`（変数を指定した場合）：「この `count` の数字が変わった時だけに様子を見るね」
- 何も書かなかった場合：……さて、ここが今回のテーマです。
—
2. 依存配列を省略するとどうなるの？（すべてのレンダリング後に発動する恐怖）
もし、あなたが `useEffect` の後ろにあるはずの依存配列をごっそり書き忘れて、こう書いてしまったとします。
import { useState, useEffect } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
// ⚠️ 依存配列を省略してしまった！
useEffect(() => {
console.log(“私はすべてのレンダリングの後に毎回呼ばれます！”);
});
return (
現在のカウント: {count}
);
}
このコードを実行したとき、何が起きるでしょうか？
先ほどのレストランの例えで言うなら、「お客さんが瞬きするたび、息をするたび、メニューを1ミリ動かすたびに、ホール係が猛ダッシュで飛んできて『何かご用ですか！？』と大声で聞きに来る状態」です。
Reactの世界では、ボタンを押して `count` が `1` に変わる（再レンダリングが起きる）と、その直後にこの `useEffect` が必ず実行されます。
「えっ、それの何がダメなの？」って思いますよね。実はここからが、実務で絶対にやっちゃいけない怖いポイントなんです。
—
3. なぜ「省略」してはいけないのか？（パフォーマンスと無限ループの罠）
現場のエンジニアたちが「依存配列の書き忘れ」にめちゃくちゃ厳しいのには、主に2つの理由があります。
① パフォーマンスの猛烈な悪化（無駄働き）
画面上でちょっとした文字入力があったり、関係のない小さな状態が変わったりするたびに、この `useEffect` の中身が実行されます。
もし、この中で「サーバーから重いデータを何度も取得する処理」や「複雑な計算」をしていたらどうなるでしょう？ お店の中がホール係のパニックで大渋滞を起こし、ブラウザがフリーズしてしまいます。
② 無限ループの恐怖（一番やっちゃうミス）
依存配列を書き忘れた `useEffect` の中で、もしうっかり「状態（state）を更新する処理」を書いてしまったら……。
1. 画面が表示される
2. `useEffect` が実行され、stateを更新する
3. stateが更新されたので、画面がもう一度レンダリングされる
4. レンダリングされたので、また `useEffect` が実行される
5. （以下、永遠にループ……無限地獄の完成です）
ブラウザのタブが「固まりました」と白くなって強制終了した経験はありませんか？ その原因の多くは、この依存配列のつけ忘れによる無限ループだったりするのです。初学者の頃は、私も何度もこの罠にハマって冷や汗をかきました。だから安心してください、みんな通る道です！
—
4. じゃあ、どう書けば正解なの？（実践的な書き分け）
「じゃあ、画面が最初にパッと表示された時だけに何かを実行したい場合はどうすればいいの？」と思いますよね。
答えはシンプルで、依存配列に「空の配列 `[]`」をちゃんと渡してあげることです。
import { useState, useEffect } from ‘react’;
function UserProfile() {
const [user, setUser] = useState(null);
// ✅ 正しい書き方：空の配列を渡すことで「初回レンダリング時のみ」実行される
useEffect(() => {
console.log(“コンポーネントが画面に最初に現れたときだけ、データを取りに行きます！”);
// ここでAPIからユーザーデータを取得する処理などを書きます
// fetchUserData();
}, []); // ← この空っぽの括弧が命綱です！
return (
プロフィール画面
);
}
これだけで、ホール係は「最初のご挨拶の時だけ」来てくれて、あとはお客さんがどんなに動いても静かに見守っていてくれるようになります。
—
5. チーフアーキテクトからのまとめとエール
Reactの `useEffect` は、使いこなせば魔法のように便利な機能ですが、ルールを無視すると牙を向いてアプリを壊してくる少し気難しい相棒です。
- 依存配列を省略する ＝ 「画面が再レンダリングされるたびに毎回実行する」 という意味になる。
- 基本的には、この「すべてのレンダリング後に実行する」というシチュエーションは、実務の現場ではほぼありません（DOMのサイズを直接測るような特殊な例外を除きます）。
- だからこそ、基本は `[]`（初回のみ） か `[value]`（特定の値が変わった時のみ） のどちらかを必ず指定する癖をつけましょう！
もし、コードを書いていて画面が急に重くなったり、コンソールログが無限に流れて止まらなくなったら、「あ、依存配列書き忘れたな？」と今日のこの記事を思い出してみてくださいね。
焦らず、一歩ずつ。あなたのReactライフを、心から応援しています！
コメント