【React】ボタンの連打を防ぎたい！デバウンス（Debounce）もしくは、処理中は非活性にするのはいかがでしょう！？

投稿者 投稿日:

1. Debounceしてみるよ

デバウンスとは特定の時間内に何度も発生するイベントを一度にまとめる技法です

例えば、ユーザーが連続してボタンをクリックしても、一定の時間内には1回だけ処理を実行するようにできます

import React, { useState, useCallback } from 'react';
import _ from 'lodash'; // lodashライブラリを使用

const App = () => {
  const handleClick = useCallback(_.debounce(() => {
    // 長時間の処理をシミュレート
    console.log('ボタンがクリックされました');
  }, 2000), []); // 2秒のデバウンス

  return (
    <div>
      <button onClick={handleClick}>
        クリック
      </button>
    </div>
  );
};

export default App;

useCallback

Reactのフックの一つで、メモ化された関数を返すために使われます。依存関係が変わらない限り、同じ関数インスタンスが再利用されます

_.debounce

Lodashライブラリの関数で、デバウンス処理を実装するために使用されます
デバウンス処理は特定の時間内に何度も発生するイベントを一度にまとめる技法です


2. 処理中はボタンを非活性する

Reactでボタンの連打を防ぐためには、ボタンをクリックした際にボタンを非活性化（disabled状態に）することが一般的な方法です

こんな感じで実装すると良いでしょう

  1. useStateフックを使用してボタンの状態を管理
  2. ボタンがクリックされた時に非活性化し、処理が完了したら再度活性化
import React, { useState } from 'react';

const App = () => {
  const [isButtonDisabled, setButtonDisabled] = useState(false);

  const handleClick = async () => {
    setButtonDisabled(true); // ボタンを非活性化
    try {
      // 長時間の処理をシミュレート（例：APIリクエスト）
      await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒待つ
      // 処理が完了したら必要な処理を実行
    } catch (error) {
      console.error("Error during processing:", error);
    } finally {
      setButtonDisabled(false); // 処理が終わったらボタンを再活性化
    }
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isButtonDisabled}>
        {isButtonDisabled ? '処理中...' : 'クリック'}
      </button>
    </div>
  );
};

export default App;

ボタンをクリックするとhandleClick関数が呼び出され、ボタンを非活性化します
その後、2秒間待機する処理（APIリクエストなど）をシミュレートし、
処理が完了するとボタンを再度活性化します

この方法で、処理が完了するまでボタンを連打されるのを防ぐことができます

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon