【入門編】 useEffectの基本構文と実行タイミング – React実践ガイド

こんにちは！Reactの学習、楽しく進められていますか？
画面に文字やボタンが表示されるようになって、「お、動いた！」という感動を味わったあとに待ち受ける、最初の大きな壁……それが、この`useEffect（ユーズエフェクト）`です。

「画面が表示されたときにデータを取ってきたいだけなのに、なんか何回も実行されちゃう…」
「依存配列？クリーンアップ？なにそれ美味しいの？」

大丈夫ですよ。最初はみんなここで盛大につまずきます。私も昔は、`useEffect`の無限ループ地獄にハマってパソコンをそっと閉じかけたことがあります（笑）。

今日は、そんな`useEffect`の基本のキを、身近な例えを交えながら一緒にゆっくり解きほぐしていきましょう。深呼吸して、コーヒーでも飲みながら気楽に読んでいってくださいね。

—

1. そもそも `useEffect` ってなに？（身近な例えでお話します）

Reactの基本は、「画面の見た目（JSX）と、データの状態（State）をピタッと同期させること」ですよね。
例えば、「ボタンを押したらカウントが増える」というのは、Stateが変われば見た目が変わるというReactが得意とする世界です。

でも、こんな「画面の表示そのものとは直接関係ないけれど、裏でコソッとやっておきたいこと」ってありませんか？

• 画面が開いた瞬間に、サーバーからユーザーのプロフィール情報を取ってくる
• タイトルバーの文字（`document.title`）を現在のページに合わせて書き換える
• タイマーをセットして、1秒ごとに時間を進める

こうした「画面描画のついでに裏でコソッとやる作業」を、Reactの世界では「副作用（Side Effect）」と呼びます。なんだか物騒な名前ですが、要するに「お使い（パシリ）」みたいなものです。

そして、この「お使い」を頼むための専用の命令書が、`useEffect` なんです。

—

2. `useEffect` の基本構造と、お買い物の流れ

まずは、`useEffect` がどんな形をしているのか、基本の構文を見てみましょう。

import { useEffect, useState } from ‘react’;

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

// useEffectの基本形
useEffect(() => {
// 【第1引数】ここに「実行してほしいお仕事（副作用）」を書く！
console.log(‘画面が表示されたよ！お仕事開始！’);

// 例：サーバーからデータを取ってくる処理など…

}, [/ 【第2引数】依存配列（お仕事の再発令条件） /]);

return

;
}

見慣れない引数が2つありますよね。難しく考えず、「スーパーのお買い物」に例えてみましょう。

1. 第1引数（関数）： 「牛乳と卵を買ってきて」というお使いのメモ（内容）です。
2. 第2引数（依存配列 `[]`）： 「この条件が変わったときだけ、もう一回お使いに行ってね」というお使いの発令ルール（条件）です。

この第2引数の「ルール（依存配列）」をどう設定するかによって、`useEffect` が動くタイミングがガラリと変わります。ここが一番重要なポイントですよ！

—

3. レンダリングサイクルと実行タイミング

Reactのコンポーネントは、Stateが変わったりするたびに、何度も何度も画面を描き直します（これを「レンダリング」と呼びます）。

`useEffect` は、「画面の表示がブラウザにしっかり反映されたあと」に、こっそり実行されます。「まずはユーザーに画面をパッと見せるのが先！裏でやるお使いはそのあと！」というReactの優しい配慮です。

この実行タイミングをコントロールする「依存配列の3つのパターン」を、お友達との約束に例えて見ていきましょう。

パターンA：依存配列が「からっぽ」 (`[]`) の場合

• お約束のセリフ： 「私たちが最初に会った（画面が最初に表示された）ときだけ、このお願いを聞いてね！」
• 実行タイミング： コンポーネントが画面に最初に登場した時（マウント時）の「たった1回だけ」

一番よく使うパターンです。APIからデータを一度だけ取得したいときなどに使います。

パターンB：依存配列に「値」を入れた場合 (`[count]`)

• お約束のセリフ： 「『count』の中身が変わったときだけ、新しくお願いを聞いてね！」
• 実行タイミング： 最初はもちろん、指定した変数（`count`など）の値が変わった時だけ

例えば、ユーザーIDが変わるたびにその人のデータを再取得したいときなどに使います。

パターンC：依存配列自体を「書き忘れた」場合 (配列なし)

• お約束のセリフ： 「画面が描き直されるたびに、何度でも毎回お願いを聞いてね！」
• 実行タイミング： 画面が再描画されるたびに「毎回」

⚠️注意！ ここは初心者が一番ハマる罠です。依存配列を書き忘れると、コンポーネントが再描画されるたびにお使いが走り、無限ループを引き起こしてブラウザがフリーズすることがあります。「あれ、なんかファンがうるさくなったぞ？」と思ったら大体これです（笑）。気をつけてくださいね！

—

4. 実用的なコードで動きを体感してみよう！

百聞は一見にしかず。実際に動かせる小さなカウンターアプリのコードを見てみましょう。
ブラウザの「開発者ツール（Console）」を開きながら、このコードの動きを想像してみてください。

import { useState, useEffect } from ‘react’;

export default function CounterApp() {
const [count, setCount] = useState(0);
const [name, setName] = useState(‘さくら’);

// パターンA：依存配列がからっぽ（最初の1回だけ実行）
useEffect(() => {
console.log(‘🚀 【初回のみ】アプリが起動しました！’);
}, []);

// パターンB：依存配列に count を指定（countが変わった時だけ実行）
useEffect(() => {
console.log(`カウントが「${count}」に変わりました！`);
// ブラウザのタブのタイトルを書き換える例
document.title = `カウント: ${count}`;
}, [count]); // ← ここに count があるので、nameを変えてもここは実行されません！

return (

);
}

動かしたときの挙動のイメージ

1. ページを開いた瞬間：
コンソールに `🚀 【初回のみ】アプリが起動しました！` と `カウントが「0」に変わりました！` の両方が表示されます（最初は初回レンダリングのため両方動きます）。
2. 「カウントを増やす」ボタンを押したとき：
`count` が変わるため、`カウントが「1」に変わりました！` だけがコンソールに流れます。タブのタイトルも変わります。
3. 「名前を変える」ボタンを押したとき：
`name` は変わりますが、`useEffect` の依存配列には `count` しか入っていないため、副作用はスルーされます（何もログが出ません）。

この「関係ないStateが変わっても、余計なお仕事をさせない」というコントロールができるようになると、Reactのパフォーマンスもぐっと良くなります！

—

5. まとめと温かいエール

お疲れ様でした！ここまで読んでいただきありがとうございます。
最後に、`useEffect` のポイントをギュッとまとめておきますね。

• `useEffect` は、画面の表示とは直接関係ない「裏でのお仕事（副作用）」を頼むためのもの。
• 実行タイミングは、ブラウザに画面が描画された「あと」。
• いつお仕事をするかは、第2引数の依存配列（お使いのルール）でコントロールする。
• `[]`（からっぽ） → 最初の1回だけ
• `[value]`（値あり） → 最初 ＋ その値が変わった時だけ
• （書き忘れ） → 毎回のレンダリング時（無限ループに注意！）

最初は、「どこに配列を書けばいいんだっけ？」と手が止まることもたくさんあります。エラーを出したり、画面がバグったりしながら、「あ、ここで再描画されちゃってるんだな」と体で覚えていくのが一番の近道です。

あなたが躓いたときは、いつでもこの記事を思い出してくださいね。
一歩ずつ、確実にReactと仲良くなっていけますから、自分のペースで楽しくコードを書いていきましょう！応援しています！