Block multiple form submissions/ debounce a fetch request on form submit in Next.js app

Question

I have a sign-up form in my Next.js application.

Undesired behaviour: if the user clicks the "sign up" submit button multiple times in quick succession, then the application makes multiple fetch requests, and multiple toasts are shown on the interface.

Desired behaviour: The user should not be able to perform any actions after pressing submit until the first submit is complete.

My first though was to make the API call synchronous. But for reasons I don't fully understand, this seems to be regarded as a bad idea:

See the only answer here, which advises not to do this: How to make javascript fetch synchronous?

I've looked at other questions along similar lines but the answers did not help:

See How to prevent form from submitting multiple times from client side? Where the top answer doesn't work when there is form validation present. And uses JQuery.

I don't quite understand why a synchronous request is not best practice here. Sure I'm blocking the CPU during an I/O operation, but I don't want the page to be doing anything until the form submission is complete?

What is the recommended method for preventing switch bounce on the form submission and could you explain why?

src/pages/auth/sign-up.js:

const onSubmit = async (data) => {
  const { email, password1, password2, first_name, last_name } = data;

  const response = await postSignUp( email, password1, password2, first_name, last_name );

  // error handling code

  toast.success('You have successfully registered!', { autoClose: 2500 })

  setTimeout( () => {
    router.push({ pathname: '/auth/verify-email', query: { email: email } });
  }, 2500 )

/src/lib/api.js:

export async function postSignUp(email, password1, password2, first_name, last_name) {
  const response = await fetch(SIGN_UP_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify( { email, password1, password2, first_name, last_name } ),
  });

  const json = await response.json();
  return json;
}

ruohola · Accepted Answer · 2022-02-25T11:37:29.227

A very simple and generally used method is to make the submit button be disabled until you get a response back from your API. So, for example:

Create a state:

const [isSubmitting, setIsSubmitting] = useState(false);

Use that state to set your submit button's disabled attribute:

<button type="submit" disabled={isSubmitting}>Save</button>

Call setIsSubmitting from your event handler:

const onSubmit = async (data) => {
  setIsSubmitting(true);

  const { email, password1, password2, first_name, last_name } = data;

  const response = await postSignUp( email, password1, password2, first_name, last_name );

  // error handling code

  toast.success('You have successfully registered!', { autoClose: 2500 })

  setTimeout( () => {
    router.push({ pathname: '/auth/verify-email', query: { email: email } });
  }, 2500 )

  setIsSubmitting(false);
}

I should have included the //error handling code since I needed to add "setIsSubmitting(false);" at the end of that so as to avoid getting the same problem of not being able to submit ever after server validation fails. But that's my bad the answer is great otherwise and fairly clear how to add to the //error handling code thank you. — Neil, Feb 25 '22 at 11:50

Block multiple form submissions/ debounce a fetch request on form submit in Next.js app

1 Answers1