How best to prevent double button clicks and duplicate / parallel mutations

[mpvosseller]

Sometimes we find users are able to accidentally double click a button and kick off duplicate / parallel mutations.

We disable the button when mutation.isPending is true but that isn't set immediately on mutate so there is a short time window when it's possible to double click the button and kick off extra mutations.

Wondering if others experience this and if anyone has adopted a clean workaround? Or do folks live with the race condition?

Thanks!

Our buttons look like this:

<PrimaryActionButton
  type="submit"
  onClick={onSubmit}
  disabled={mutation.isPending}
  title="Submit"
/>

And our event handlers looks like this:

const onSubmit = handleSubmit(async (data) => {
  if (mutation.isPending) {
    return
  } 
  mutation.mutate({
    arg: 'value' 
  })
})

[TkDodo]

Does this differ from when you have a flag in local state that you set when the button is clicked? Because the component should re-render immediately with mutation.isPending just like if you were using local state.

[mpvosseller]

@TkDodo It is no different than using a regular react state flag: It's possible for multiple click events to get triggered before a re-render causes the state to get updated.

It can be solved with a useRef flag so it is always updated.

Was just wondering if others run into this issue and if so what (if anything) they do it fix or mitigate it. Maybe it's rare enough that the answer is nothing?