How to prevent multiple times button presses with React?

To prevent multiple times button presses with React, you can disable the button while an action is being processed or add a state variable that tracks whether the button is currently being pressed or not.

Here’s an example code snippet that demonstrates how to prevent multiple button presses with React:

import React, { useState } from 'react';

function MyButton() {
  const [isProcessing, setIsProcessing] = useState(false);

  const handleClick = async () => {
    if (isProcessing) {
      return;
    }

    setIsProcessing(true);

    try {
      // Do some async processing here...
      // For example, make an API call or perform a long-running computation
    } catch (error) {
      console.log(error);
    }

    setIsProcessing(false);
  };

  return (
    <button onClick={handleClick} disabled={isProcessing}>
      {isProcessing ? 'Processing...' : 'Click me'}
    </button>
  );
}

export default MyButton;

In this example, we define a functional component named “MyButton” that displays a button that can be clicked. We use the useState hook to create a state variable named isProcessing that tracks whether the button is currently being processed or not.

We define a function named handleClick that is called when the button is clicked. This function checks whether the button is currently being processed (isProcessing is true) and returns early if it is. Otherwise, it sets isProcessing to true, performs some async processing (e.g. makes an API call), and sets isProcessing back to false when the processing is done.

In the JSX code, we display the button and set its onClick event handler to handleClick. We also set the disabled attribute of the button to isProcessing, which will disable the button while it is being processed.

By disabling the button while it is being processed or tracking whether the button is currently being pressed, we can prevent multiple button presses with React.