先生と生徒の会話形式で理解しよう

生徒

「ReactのuseEffectで、ページが開いたときだけ一回だけ動く処理ってできますか？」

先生

「できますよ。useEffectの仕組みを正しく使うと、初回だけ動く特別な書き方ができます。」

生徒

「初回だけってどういうときに使うんですか？」

先生

「ページを開いた瞬間にデータを読み込んだり、最初に一度だけ準備しておきたい処理などに使います。では実際に例を見てみましょう。」

1. useEffectとは？初めて使う人向けにやさしく解説

useEffectはReactの「フック」とよばれる機能のひとつで、画面の表示が変わったときに実行したい処理を書くための仕組みです。日常生活でたとえると「電気のスイッチを入れたら必ずライトがつく」のように、特定のタイミングで自動的に動いてくれる便利な道具のような役割を持っています。

フックという名前がむずかしく感じるかもしれませんが、「便利な追加機能」くらいの理解で大丈夫です。 useEffectはとてもよく使われる機能で、ページの読み込み、データの取得、イベント準備など、さまざまなタイミングで必要な処理を実行させることができます。

その中でも特によく使われるのが「初回だけ一度だけ動くuseEffect」です。 Reactでページを開くたびに何度も処理が動くのではなく、一回きりでよい処理に向いています。

2. useEffectで初回だけ処理を実行するしくみ

useEffectが初回だけ一度だけ実行されるしくみは「依存配列」とよばれる仕組みによって実現できます。依存配列とは、useEffectがいつ動くのかをReactに伝えるための「メモ」のようなものです。

配列とは四角いカゴのようなもので、そこに値を入れるとその値が変わったときにuseEffectをもう一度動かします。しかし、依存配列をからっぽのままにすると、Reactは「何も変わらないから一度だけ動かせばいいんだな」と判断します。

そのため、初回だけ動く処理を書きたいときは、useEffectの第二引数に空の配列[]を指定します。これが初回だけ実行するための重要ポイントです。


import React, { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("初回だけ実行されます！");
  }, []); // 空の配列を指定

  return (
    <div>
      <h1>初回だけ実行するuseEffectの例</h1>
    </div>
  );
}

export default App;

（画面を開いたときに一度だけ「初回だけ実行されます！」が実行されます）

3. 初回だけ実行するuseEffectが使われる代表的な場面

初回だけ一度動く処理には、大事な役割がたくさんあります。これらは実際の開発で非常によく登場するため、理解しておくとスムーズにReactを使いこなせるようになります。

① ページ読み込み時にデータを取得する

ページを開いたときにサーバーから情報を読み込む場合、毎回状態が変わるたびに呼ばれてしまうと負担が大きくなってしまいます。そのため、ページの最初の表示時だけ一度だけデータ取得を行います。

② 初回表示時にアニメーションを開始する

サイトを開いた直後にフェードインのアニメーションなどを動かす場合にも、useEffectの初回実行が便利です。アニメーションは何度も繰り返す必要がないため、初回だけの実行がぴったりです。

③ ユーザーの初期設定を読み込む

ページを開いたときに、ユーザー設定や保存済みの情報を読み出す処理も初回だけ動かすケースが多く、useEffectが役立ちます。

4. useEffectの仕組みをもっと理解するためのサンプル

ここでは、画面を開いた瞬間に「ようこそ」というメッセージを設定し、その後ボタンを押すと別のメッセージに切り替わる例を紹介します。初回だけ実行するuseEffectがどのように動いているか、より直感的に理解できます。


import React, { useState, useEffect } from "react";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    setMessage("ページを開いていただきありがとうございます！");
  }, []); // 初回だけ実行

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンが押されました！")}>
        メッセージを変更する
      </button>
    </div>
  );
}

export default App;

（ページを開くと最初に「ページを開いていただきありがとうございます！」と表示され、ボタンを押すとメッセージが切り替わります）

このように、useEffectは画面に表示する内容を初期化する場面でもとても便利です。使い方を覚えると、Reactでの画面づくりが一段とかんたんになります。

5. 初回のみ実行されるuseEffectでAPI通信を行うときの注意点

useEffectを使って初回だけAPI通信を行う場面はとても多くあります。インターネットを通じて外部のデータを読み込む処理は時間がかかることがあり、何度も同じ通信を繰り返すとページが重くなる原因にもなります。そのため、初回だけ一度だけデータを取得する方法はとても重要です。

また、API通信の途中で画面が切り替わる（コンポーネントが消える）こともあり、その場合に不要な処理が残らないように注意する必要があります。通信が完了する前に画面が切り替わるとエラーになることもあるため、状況によってはクリーンアップ処理を追加することがあります。


import React, { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let mounted = true;

    async function load() {
      const response = await fetch("https://api.example.com/info");
      const result = await response.json();
      if (mounted) {
        setData(result);
      }
    }

    load();

    return () => {
      mounted = false;
    };
  }, []);

  return (
    <div>
      <h1>データ取得の例</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

（初回だけデータを読み込み、データ取得途中に画面が切り替わっても安全に動作します）

6. useEffectの初回実行と状態の初期化を組み合わせた実用例

初回だけ処理を行うuseEffectは、状態（ステート）の初期化と組み合わせることで、さらに便利に活用できます。状態とは「画面に表示する情報の箱」のことで、ユーザーごとに違う内容を表示したい場面などで使われます。

たとえば、ページを開いた瞬間にテーマ設定（ライトモードやダークモード）を読み込んだり、ログイン情報を確認したりする処理が挙げられます。初回だけ読み込むことで、無駄な処理を減らしつつ適切に画面を表示できます。


import React, { useState, useEffect } from "react";

function App() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const saved = localStorage.getItem("theme");
    if (saved) {
      setTheme(saved);
    }
  }, []);

  return (
    <div className={theme}>
      <h1>現在のテーマ: {theme}</h1>
      <button onClick={() => setTheme("light")}>ライト</button>
      <button onClick={() => setTheme("dark")}>ダーク</button>
    </div>
  );
}

export default App;

（ページ読み込み時に前回保存したテーマを自動で反映します）

7. 初回だけ動かす処理が正しく動かないときの確認ポイント

useEffectを初回だけ動かしたいのに、思ったとおりに動かないケースもあります。多くの場合は依存配列や関数の扱いに原因がありますが、ポイントを確認するとすぐに解決できることがほとんどです。

① 依存配列に余計な値が入っていないか

依存配列に値が入っていると、その値が変わるたびにuseEffectが再実行されます。「初回だけ実行」したい場合は、必ず空の配列を指定します。

② コンポーネントが再マウントされていないか

コンポーネントが別のページに移動したり戻ったりするたびに一度消え、再び作られる場合があります。再マウントされるとuseEffectはまた初回として扱われます。

③ Strict Modeの影響を理解する

Reactの開発モードでは、Strict ModeによってuseEffectが2回実行されるように見えることがあります。これは実際の動作ではなく、開発時のチェック機能によるもので、本番環境では1回だけ実行されるようになります。


import React, { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Strict Modeでは2回表示されることがあります");
  }, []);

  return <h1>Strict Modeの注意点</h1>;
}

export default App;

（開発環境で2回出ても、本番では1回だけ実行されるので安心して使えます）

まとめ

ReactのuseEffectを使って初回のみ処理を実行する方法について、記事全体でさまざまな角度から学んできました。ここでは、その内容を改めて整理しながら、実際の開発でどのように活かせるのかを具体的にまとめていきます。初回実行の仕組み、依存配列の使い方、API通信、状態の初期化、StrictModeの挙動など、初心者がつまずきやすいポイントを丁寧に振り返りながら、 Reactを使う上で重要な基本動作をしっかり理解していきます。また、実用的なサンプルコードも用意し、より深い理解につながるよう構成しています。とくに依存配列が空配列であることが初回のみ実行される条件であり、このしくみを押さえておくことで、さまざまな場面に応じた柔軟なコンポーネント設計が可能になります。

初回実行の基本と応用

初回のみ処理を実行するためには、useEffectの第二引数に空の配列を指定することが必要です。この仕組により、Reactは「この処理は初回描画後に一度だけ動かせば良い」と判断します。ページ読み込み時のAPI通信、初期メッセージの設定、テーマの読込、アニメーション開始処理などは、初回だけ実行すれば十分な動作が多いため、useEffectの特性が大きく役立ちます。また、非同期処理を扱う場合は、コンポーネントが削除されるタイミングに備えてクリーンアップをしておくことも重要です。

実践的なサンプルプログラム

以下は、初回だけ実行される処理でユーザーのログイン状態を読み込み、画面表示を制御する例です。ログインしているかどうかをlocalStorageから確認し、初回レンダリング時に状態として反映します。このような処理は実際の現場でも非常によく利用される形式です。


import React, { useEffect, useState } from "react";

function LoginCheck() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const savedUser = localStorage.getItem("userName");
    if (savedUser) {
      setUser(savedUser);
    }
  }, []);

  return (
    <div>
      <h1>{user ? `${user}さん、ようこそ！` : "ログインしていません"}</h1>
    </div>
  );
}

export default LoginCheck;

（初回読み込み時にユーザー名を取得し、存在すれば画面に表示します）

このようなパターンは、ユーザーデータの保持や初期設定、テーマ管理などに応用できます。 Reactで動的な画面を扱う際には欠かせない知識のため、しっかりと理解しておくと開発がとても楽になります。

初回に動かす処理が思い通りに動かないときの対処

初回のみ動かしたいのに再実行されてしまう場合は、依存配列に余計な値が入っていないか確認する必要があります。また、StrictModeが有効だと開発環境で二度実行されるように見えることがありますが、本番環境では一度だけの実行となるため、挙動の違いを理解したうえで開発することが大切です。 API通信や非同期処理を扱う場合には、コンポーネントがアンマウントされた際のクリーンアップも忘れないようにしましょう。こうした細かい積み重ねが、バグを防ぐ堅牢なReactアプリケーションづくりにつながります。