useEffectとは
この記事からuseEffectについて見ていきます。
useEffect は、コンポーネントが画面に表示されたり（マウント）、更新されたり、消えたり（アンマウント）するタイミングで実行される処理 を定義するための React のフック（Hook）です。
基本的な使い方は下図です。
マウントとは？
まず、「マウント」という耳慣れない言葉について説明します。
マウントとは、コンポーネントが最初に画面に表示されること を指します。
つまり、コンポーネントが初めて DOM に追加されるタイミング です。
useEffectの使い方
説明だけだとわかりにくいと思いますので、実際にコードを書いて動かしてみましょう。
「use-effect-app」アプリを作ります。
npx create-next-app@latest use-effect-appappフォルダにcomponentsフォルダを作成しその中に「counter.js」を作ります。
counter.js
"use client";
import { useState, useEffect } from "react";
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
alert("コンポーネントがマウントされました。");
}, []); // 依存配列が空 → 初回マウント時のみ実行
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
export default Counter;
次にapp/page.jsでCounterコンポーネントを読み込みます。
page.js
import Counter from "./components/counter";
export default function Home() {
return (
<Counter />
);
}
開発サーバーを立てて確認してみましょう。
npm run dev
このようにアラートが出てくるかと思います。
「＋1」の部分をクリックしてみると、
アラートは表示されません。
このように、useEfectの第二引数の[]の中身を空にすると、初回マウント時のみ処理が動きます。
別の例を見てみましょう。
app/components/everyCounter.js
"use client";
import { useState, useEffect } from "react";
function EveryCounter() {
const [count, setCount] = useState(0);
useEffect(() => {
alert("カウンタアップしました。");
}, [count]); // ✅ `count` が変わるたびに実行される！
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
export default EveryCounter;
page.js
import EveryCounter from "./components/everyCounter"; <EveryCounter />
EveryCounter部分の「＋1」をクリックする度にアラートが出ます。
このようにuseEffectの第二引数の[]に値を設定すると、初回マウント時＋その値が更新される度に処理が動きます。
useEffectの機能
useStateによってstateが更新されるとコンポーネントが再レンダリング（マウント）されます。
これに対し、useEffect内の処理はコンポーネントの初回マウント時や設定した値の更新に応じて処理するタイミングを決められます。
このようにレンダリング毎に毎回処理が動かないことが１つのメリットです。
コメント