reactjs-nextjs-react-hooks-useeffect

React Hooks の useEffect ってどんな機能があるの？

今回は、React Hooks の中でも特によく使用される useEffect についてご紹介します。

useEffect とは？

useEffect とは、React.js で 画面が表示された後（レンダリング完了後）に、UIの描画以外の処理（副作用：Side Effects）を行うためのHook です。
API通信 や タイマー処理、ブラウザ操作など、画面描画だけでは完結しない処理 を書くために useEffect を使用します。

主な UI の描画以外の処理（副作用：Side Effects） には、次のようなものがあります。

データ取得（API通信: fetch / axios）
タイマー・定期処理（setInterval / setTimeout）
DOM操作
イベントリスナーの登録・解除
外部ライブラリとの接続（WebSocket、Firebase など

書き方

useEffect(() => {
  // 画面が表示された後（レンダリング完了後）に実行したいUIの描画以外の処理（副作用）の処理
}, [依存配列]);

基本的なコード例

処理フロー

画面が表示される
useEffect 内のコードが実行される
ログが2つ表示される
※React18以降では開発モードでStrictModeが有効な場合はuseEffectが2回実行される
※本番環境では1回のみ実行される

import { useEffect } from "react";

export default function UseEffectPage() {
  useEffect(() => {
    console.log("画面が表示された！");
  }, []); // 依存配列([]) がある → 最初の1回だけ実行

  return <h1>Hello useEffect!!</h1>;
}

「画面が表示された！」が2回表示される

useEffect を2回実行されないようにするには

StrictModeを無効(コメントアウト)にする一番簡単

createRoot(document.getElementById('root')).render(
  // <StrictMode>
  <App />,
  // </StrictMode>,
);

「画面が表示された！」が1回のみの表示になる

参考サイト

useEffect はいつ実行される？

実行のタイミングは、下記の 3パターン があります

最初の1回だけ ※一番よく使う

※React18以降では開発モードでStrictModeが有効な場合はuseEffectが2回実行される

useEffect(() => {
  console.log("初回だけ");
}, []);

初回と値が変更されたとき

// count が変わったときだけ実行される
useEffect(() => {
  console.log("初回とcount変更時");
}, [count]);

毎回実行 ※あまり使わない

useEffect(() => {
  console.log("毎回");
});

依存配列（[]）とは？

依存配列（[]）とは、 “いつ実行するか” を指定する場所のことです。

書き方	意味
[] ※迷ったらこちらを使用する	最初の1回だけ
[変数]	初回と変数が変更したら
なし	毎回

クリーンアップとは？

useEffectのクリーンアップとは、useEffectで行った処理を元に戻したり、後処理をするための機能 です。
主に 画面遷移などでコンポーネントが画面から消えるとき や、次の useEffect が実行される直前 に呼ばれます。

例：タイマーのクリーンアップ

タイマーは、コンポーネントが消えた後も動き続けてしまう ため、バグやメモリリークを防ぐ目的でクリーンアップが必要 です。

➡️ タイマーやイベントリスナーを使う場合は、必ず後処理を行いましょう。

import { useEffect, useState } from 'react';

export default function Timer() {
  const [count, setCount] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;

    const timer = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    // クリーンアップ関数
    // 関数として返して React が必要なタイミングで、タイマーを止める処理を呼ぶ
    // running が false になる or アンマウント時に呼ばれる
    return () => {
      clearInterval(timer);
      console.log('タイマー停止');
    };
  }, [running]);

  // 開始
  const start = () => setRunning(true);

  // 停止
  const stop = () => setRunning(false);

  // リセット ※ 0秒になるがタイマーは止まらない
  const reset = () => {
    setCount(0);
  };

  return (
    <div>
      <h2>useEffect Timer</h2>
      <p>{count} 秒</p>
      <button onClick={start}>開始</button>
      <button onClick={stop}>停止</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
}

やってはいけないこと

❌ useEffect の中で無限ループ

❌ NG例 ※画面がフリーズしてしまう
useEffect(() => {
  setCount(count + 1);
}, [count]);

❌ 何でも useEffect に書く

❌ NG例
useEffect(() => {
  const total = price * count;
}, [price, count]);

✅ OK例 useEffect 以外で書く
const total = price * count;

useEffect のその他の使用例

データ取得（API通信）

画面描画後に一度だけ データ取得（API通信）を実行
初期データのロードに最適

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, []);

イベントリスナー登録・DOM操作

画面サイズの変化を監視
コンポーネントが消えたら解除

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

外部ライブラリとの連携

WebSocket や Firebase などの接続・購読処理
コンポーネント終了時に安全に接続を切る

 useEffect(() => {
    const socket = new WebSocket('wss://echo.websocket.org');
    socket.onmessage = (e) => console.log(e.data);
    return () => socket.close();
  }, []);

まとめ

React Hooks の useEffect について、いかがでしたでしょうか？

まずは基本的な使い方をしっかり押さえ、データ取得のAPI通信やタイマー、イベントなどのシンプルな処理 を小さなコンポーネントで試しながら、クリーンアップ とセットで少しずつuseEffect に慣れていきましょう。