【入門編】 依存配列が空配列[]の場合の挙動 – React実践ガイド

こんにちは！Reactの世界へようこそ。チーフアーキテクトの私です。

Reactを触り始めると、誰もが必ず一度はぶつかる壁がありますよね。そう、あの不思議な呪文のような関数――`useEffect`です。

特に、その中身である「依存配列に空っぽの `[]` を渡す」という書き方。「マウント時に1回だけ実行する」って習ったけれど、そもそも「マウント」って何？ なんで空っぽなのに動くの？ と、頭がモヤモヤしている方も多いのではないでしょうか。

大丈夫ですよ、安心してください。最初はみんな「何これ呪い？」って思いますから。今日は、身近な例えを交えながら、この `[]` の正体を丸裸にしていきましょう！

—

そもそも「マウント」ってなんだろう？

専門用語って難しく聞こえますよね。「マウント（Mount）」を、もっと身近なものに例えてみましょう。

例えば、お部屋に新しく「自動照明（人を検知してパッと点くライト）」を買ってきたとします。
ダンボールから出して、壁に「ガチャッ」と設置して、スイッチをONにする。この「初めてお部屋に設置されて、スタンバイ完了した瞬間」が、Reactでいう「マウント（画面への登場）」です。

Reactのコンポーネントも同じです。ユーザーが画面を開いて、そのパーツが初めてブラウザの画面に「ドスン」と現れた瞬間、それがマウントです。

`useEffect` と空の依存配列 `[]` の関係性

さて、ここで登場するのが `useEffect` です。これは、コンポーネントが画面に出現したあとに「おつかれ！ついでにこれやっといて！」と裏でこっそりお願いする、いわば「お使い係」のようなものです。

そして、この `useEffect` の第2引数（後ろにくっついている配列 `[]` のことですね）は、お使い係に対する「監視カメラ」のような役割を持っています。

useEffect(() => {
// ここにやりたいことを書く
}, [/ 監視する変数 /]);

ここに変数を指定しておくと、その変数が変わるたびに「おい、値が変わったぞ！もう一回お使いに行ってこい！」と、お使い係が何度も走らされます。

では、この監視カメラの配列を、何も指定せずに空っぽ `[]` にしたらどうなるでしょうか？

「監視するもの、ゼロです！」
「じゃあ、いつお使いに行けばいいですか？」
「――それはもちろん、最初に画面に登場した（マウントした）時の1回きりでいいよ！」

これが、依存配列を空にする `[]` の正体です。「画面に最初にポツンと現れたとき、最初で最後のご挨拶として1回だけ実行する」という、いわば一期一会の約束なんですね。

—

具体例で見てみよう：お店に入ったときの「いらっしゃいませ」

イメージしやすいように、簡単なコードを見てみましょう。
Webサイトを開いたときに、サーバーへ「おすすめ商品リストをください！」とデータを1回だけもらいに行く（APIの初期取得）という、よくあるシチュエーションです。

import React, { useState, useEffect } from ‘react’;

function ProductCatalog() {
// 商品リストを保存しておくための箱（state）を用意します
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);

// ここが今日の主役！
useEffect(() => {
console.log(‘【お使い係より】画面が出現したので、サーバーからデータを取ってきます！’);

// 実際にAPIからデータを取ってくるフリ（タイマーで1秒待つ）
const fetchProducts = async () => {
// 本来はここに fetch(‘https://api.example.com/products’) などを書きます
const fakeData = [‘りんご’, ‘みかん’, ‘バナナ’];

setProducts(fakeData); // ゲットした商品を箱にしまう
setLoading(false); // 「読み込み中だよ」サインを終わらせる
};

fetchProducts();

}, []); // ★ここが空っぽ「[]」なので、画面が開いたときの1回しか動きません！

return (

);
}

export default ProductCatalog;

このコードをブラウザで動かすと、コンソール（開発者ツール）には、何度画面を眺めても、ボタンを押して遊んでも、最初の1回しか「サーバーからデータを取ってきます！」というログは流れません。

もし、この `[]` を書き忘れてしまったり、消してしまったりするとどうなるでしょう？
Reactは「監視するものがないなら、無限に暴走して毎回データを取りに行っていいんだな！」と勘違いし、無限ループ（サーバーへのスパC攻撃のような状態）を起こしてブラウザがフリーズしてしまいます。恐ろしいですね……！

だからこそ、空の `[]` は「ここで終わり！1回だけ！」と、お使い係にブレーキをかけるための大切な命綱なのです。

—

実務で気をつけるべき「ちょっとした罠」

最後に、現場でよくある「やっちゃいけないミス」をそっとお伝えしておきますね。

初心者の方によくあるのが、「本当は画面内のボタンのクリックとかに合わせて動かしたいのに、とりあえず動くからって全部 `[]` にしちゃう」というパターンです。

• APIから最初のデータを1回だけ取る ➔ `[]` でOK！大正解！
• 画面の検索窓に文字を入力するたびに検索結果を変えたい ➔ `[]` じゃダメ！入力された文字の変数を配列に入れなきゃいけない。

「1回だけ動かしたい」のか、「何かの変化に合わせて動かしたい」のか。迷ったときは、「これはお部屋に入ったときの『最初のご挨拶』なのか、それとも『その後のやり取り』なのか」を思い出してみてください。

—

まとめ

• `useEffect` の依存配列に `[]`（空っぽ）を渡すと、コンポーネントが最初に画面に現れたとき（マウント時）に、1度だけ実行される。
• 主なユースケースは、ページを開いたときの初期データの取得（API通信）など。
• 無限ループを防ぐための大切なブレーキなので、「1回きりでいい処理」には積極的に使っていこう！

最初は難しく感じるReactのルールも、こうして身近なことに置き換えてみると、少しだけ仲良くなれた気がしませんか？
焦らず、一歩ずつ、あなたのペースでコードを書いていきましょう。応援しています！