はじめに

Reactでフォーム送信やAPIリクエストを伴うボタンを作るとき、**二重送信（ダブルクリック）**の対策はとても重要です。
対策をしないと、意図しない重複処理が走ってしまい、以下のような問題が起こる可能性があります。

重複した注文や登録

サーバーへの過剰リクエスト

ユーザー体験の低下

この記事では、Reactで二重送信を防ぐための基本的な実装パターンを紹介します。

実装例

以下のようなボタンを例に説明します。

✅ 基本的な二重送信防止方法（isLoadingフラグの活用）

import React, { useState } from "react";

const SubmitButton = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    if (isLoading) return; // 二重送信を防止

    setIsLoading(true);
    try {
      // ここにAPI呼び出しなどの非同期処理を記述
      await new Promise((resolve) => setTimeout(resolve, 2000));
      alert("送信完了！");
    } catch (error) {
      console.error("エラー:", error);
    } finally {
      setIsLoading(false); // 処理が完了したら再びクリック可能に
    }
  };

  return (
    <button onClick={handleClick} disabled={isLoading}>
      {isLoading ? "送信中..." : "送信"}
    </button>
  );
};

export default SubmitButton;

解説ポイント

isLoading という状態フラグを使って、「送信中」かどうかを判定しています。
送信処理中 (isLoading: true) はクリックイベントを無視。
ボタンの disabled 属性を使ってUI上でも無効にしています。
処理が終わった後に isLoading を false に戻すことで、再度送信可能になります。

応用：トースト通知やローダー連携も可能

以下のようなライブラリと組み合わせると、よりユーザーフレンドリーな体験が作れます。

react-toastify：成功・失敗時のトースト通知
react-spinners：ローディングスピナーの表示

まとめ

Reactで二重送信を防ぐには、isLoading のような状態フラグを活用するのが最も簡単で効果的な方法です。
実際のプロジェクトでも、このパターンは多用されているので、ぜひ取り入れてみてください！

ボタンクリック以外にも、フォームの onSubmit に対して同様のロジックを組み込むことも可能です。
状態管理ライブラリ（ReduxやRecoilなど）を使ってグローバルな送信状態を管理することもできます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。