debounce handleSubmit not work

[linchen-myob]

import debounce from "lodash.debounce";

const onSubmit = data => {
    console.log(data);
  }
<form
      onSubmit={form.handleSubmit(debounce(onSubmit, 500))} >

I click on submit button 10 times quickly, console.log will called 10 times

if I changed to

<form
      onSubmit={debounce(form.handleSubmit, 500)(onSubmit))} >

then first time I click on submit button, it will refresh whole page

[bluebill1049]

i would recommend you to the following

onSubmit={debounce(() => {
  form.handleSubmit(onSubmit)() // invoke the actual call
}, 1000)}

this is not an issue with this lib, it's just standard callback.

have a read here: https://lodash.com/docs/4.17.15#debounce

[meotimdihia]

It doesn't work for me with the code:

 <form
      onSubmit={debounce(
        (e) => {
          e.preventDefault()
          handleSubmit(onSubmit)()
        },
        3000,
        { leading: true, trailing: false }
      )}
    >

It is strange ...

[abhijjeet]

This might help:

const debouncedOnSubmit = React.useRef(debounce(onSubmit, 1000)).current;

<form onSubmit={form.handleSubmit(debouncedOnSubmit)}></form>

useRef maintains the debounce timer and ensures the same debounced function is used across re-renders.

[gormonn]

If you use debounce from lodash:

debounce(
  () => {
    form.handleSubmit(submitHandler)();
  },
  600,
  { leading: false },
)

[bluebill1049]

If you use debounce from lodash:

debounce(
  () => {
    form.handleSubmit(submitHandler)();
  },
  600,
  { leading: false },
)

Thanks! Would you be able to share a codesandbox?

[gormonn]

@bluebill1049 Sorry, I can't right now. But I think it has to do with the use case. I'm initializing the form in "onChange" mode, so for example, any input without debounce will immediately submit the data, which is not very convenient, especially with text input fields.