[React][Hooks] `useEffect` + `setTimeout` + `clearTimeout` の使い方

概要

• Reactアプリケーションで、副作用の管理や非同期処理のタイミング制御に欠かせない useEffect フックを紹介
• setTimeout を組み合わせることで、一定時間後に実行される処理を実装できる
• 初回マウント時の処理、クリーンアップ処理、状態変化に応じた処理に使われる場面が多い

useEffect フックによって 「副作用（データ取得、タイマー、DOM操作など）を安全にReactライフサイクルに統合」 することができる

実施条件

• React + TypeScript プロジェクトが構築済みであること
• React Hooksの基本（useState, useEffect）を理解していること
• タイマーやDOMの基本的な知識があること（マウント、アンマウントなど）

環境

ツール	バージョン	目的
Node.js	22.5.1	Reactアプリ実行環境
React	19.1.0	UI構築
TypeScript	4.9	型定義による安全な開発

useEffect(() => { ... }, []) の基本構造

• 第1引数の関数は副作用処理を記述（マウント・更新時に実行）
• 第2引数の配列は依存配列。空配列なら初回マウント時のみ実行
• return で返した関数はクリーンアップ処理として、アンマウント時などに実行される

setTimeout(() => { ... }, 遅延ミリ秒) の基本構造

• 指定ミリ秒後に一度だけ関数を実行

• clearTimeout(timeoutId) でキャンセル可能

• タイマーIDの型は環境により異なる

  • Node.js: NodeJS.Timeout
  • ブラウザ: number

clearTimeout(timeoutId) の基本構造

• setTimeout によって返されたタイマーIDを使って、指定された処理をキャンセルできる
• 通常は useEffect の return 部分（クリーンアップ関数）で使われ、コンポーネントのアンマウント時にタイマー処理を止めるために利用される

useEffect + setTimeout + clearTimeout の基本構造

1. importセクション
2. 型定義セクション
3. 関数定義セクション
   3.1 内部状態管理セクション
   3.2 イベントハンドラーセクション
   3.3 副作用処理セクション
   3.4 返り値構築・ロジックセクション

基本構文: useEffect + setTimeout + clearTimeout

// 1. importセクション
import React, { useEffect } from 'react';

// 2. 関数定義セクション
const TimeoutComponent = () => {
  // 3.1 内部状態管理セクション（今回は特になし）

  // 3.2 イベントハンドラーセクション（今回は特になし）
  
  // 3.3 副作用処理セクション
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      console.log('3秒後に実行されました');
    }, 3000);

    // クリーンアップ処理
    return () => clearTimeout(timeoutId);
  }, []);

  // 3.4 返り値構築・ロジックセクション
  return <p>3秒後にコンソールにログが出力されます</p>;
};

export default TimeoutComponent;

useEffect の return で clearTimeout() を呼ぶことで、アンマウント時にタイマーが無効化されるため安全

活用例

1. ボタンを押したら3秒後にメッセージ表示（状態とイベントの連携）

// 1. importセクション
import React, { useState, useEffect } from 'react';

// 2. 関数定義セクション
const ShowMessageLater = () => {
  // 3.1 内部状態管理セクション
  const [show, setShow] = useState(false);
  const [visible, setVisible] = useState(false);

  // 3.2 イベントハンドラーセクション（今回は特になし）
  
  // 3.3 副作用処理セクション
  useEffect(() => {
    if (!show) return;

    const timeoutId = setTimeout(() => {
      setVisible(true);
    }, 3000);

    // クリーンアップ処理
    return () => clearTimeout(timeoutId);
  }, [show]);

  // 3.4 返り値構築・ロジックセクション
  return (
    <div style={{ padding: '1rem' }}>
      <button onClick={() => setShow(true)}>3秒後に表示</button>
      {visible && <p>表示されました！</p>}
    </div>
  );
};

export default ShowMessageLater;

状態 show の変化をトリガーに useEffect が発火 → 3秒後に visible を更新

2. カウントダウンタイマーの開始・表示、

// 1. importセクション
import React, { useState, useEffect } from 'react';

// 2. 関数定義セクション
const CountdownTimer = () => {
  // 3.1 内部状態管理セクション
  const [time, setTime] = useState(5);

  // 3.2 イベントハンドラーセクション
  const handleCountdownComplete = () => {
    alert('カウントダウンが完了しました！');
    // 他にも任意の処理をここに追加可能
  };

  // 3.3 副作用処理セクション
  useEffect(() => {
    if (time <= 0) {
      handleCountdownComplete();
      return;
    }

    const timeoutId = setTimeout(() => {
      setTime((prev) => prev - 1);
    }, 1000);

    // クリーンアップ処理
    return () => clearTimeout(timeoutId);
  }, [time]);

  // 3.4 返り値構築・ロジックセクション
  return (
    <div style={{ padding: '1rem' }}>
      <p>残り時間: {time}秒</p>
    </div>
  );
};

export default CountdownTimer;

time が変化するたびに useEffect が再実行され、1秒ごとに setTime される

3. コンポーネントマウント時に一度だけ処理実行（ログイン通知など）

// 1. importセクション
import React, { useEffect } from 'react';

// 2. 関数定義セクション
const WelcomeMessage = () => {
  // 3.1 内部状態管理セクション（今回は特になし）

  // 3.2 イベントハンドラーセクション（今回は特になし）
  
  // 3.3 副作用処理セクション
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      alert('ようこそ！');
    }, 2000);

    // クリーンアップ処理
    return () => clearTimeout(timeoutId);
  }, []);

  // 3.4 返り値構築・ロジックセクション
  return <p>ページを開いて2秒後にアラートが表示されます</p>;
};

export default WelcomeMessage;

初回マウント時に setTimeout → アンマウント時にキャンセルされる構造

useEffect + setTimeout + clearTimeout の用途まとめ

ユースケース	解説
初回読み込み処理	ページマウント時に1度だけ実行される副作用（通知、データ取得など）
タイマー処理	一定時間後に状態を更新（遅延実行、リマインダーなど）
状態変化に応じた遅延処理	ボタンクリックなどをトリガーに、一定時間後の処理を実行
クリーンアップ	アンマウント時に clearTimeout でタイマー解除してリーク防止
フェード表示・アニメーション	遅延でUI変化を加えたい場合にも便利（CSSと組み合わせて）

参考リンク

• React公式: useEffect
• MDN: setTimeout
• TypeScript: 型ガイド
• React公式: フックの使い方