debounce option

[chiefjester]

Is there an option for debouncing validation?

[wmertens]

Use an async validator and debounce that?

[chiefjester]

would that work? any sample code?

[erikras]

We'd need to flesh out some more what, exactly, would be useful. Presumably, debouncing would only be useful for async validation, as sync validation tends to be fast enough to be done in realtime on every keypress. The other option is to debounce the touched aspect of the field, so that maybe a fast typist could get in some data before the field was marked as touched (although this doesn't make that much sense, since redux-form defaults to touchOnBlur.

I was going to code up an example, but my intuition told me to stop and just look on npm. Of course there's a library that will debounce any function already! Try wrapping your asyncValidate function with the appropriately named debounce?

[chiefjester]

my use case is having unobtrusive validations. Where you only validate the fields on change after the first click on submit. Another approach is making a debounce option basically validate after say 500ms delay.

[erikras]

It sort of already does that out of the box, where it won't show the validation error until the field is "touched", so if you use the touchOnBlur: false option, then the fields will only be marked "touched" on submit. Once touched, every onChange will potentially change the displayed error message.

[chiefjester]

thank you! @erikras

[dbismut]

Hey @erikras, thanks for the amazing work. I'm developing on a mid 2012 Macbook Air and I can tell you that even without being a fast typist, having the validation function running at every key press makes the form almost unusable (node local server is eating 50% of my CPU power on top of that). Note that I don't have react-devtools installed yet, so they can't be blamed for the poor performance.

I would really love to be able to use debounce. I tried debouncing the validation function with no luck. I was considering debouncing onChange={_.debounce(value => myfield.onChange(value), 500} for every component but I'm not sure this is the right approach.

I'm already using asyncValidate for other purposes. I've been reading about memorize but does that achieve the same goal?

Thanks in advance.

[fedorinoGore]

@erikras Sorry, for asking something you already answered.
I could see that there is an option to enable debouncing on asyncValidate by setting touchOnBlur: false option. But I dont really understand how it works, and how to set debounce delay?
Will highly appreciate if you could share some more information!

[fedorinoGore]

@erikras Actually I made it work by using lodash _.debounce.
It works just as I expected, but redux-form library throws an error in console - asyncValidate should return a promise

[peeyush-ad2games]

@fedorinoGore same issue with debounce, did you get it working?

[pjsikora]

Hey! Has it been resolved somehow?

[chetangautam]

@thisguychris this seems to be still issue, you closed it long ago tho. I do not see any solution/recommendation suggested. Could you or @erikras take a moment to reconsider its status or provide some alternatives. Thanks!

[supostat]

@chetangautam I'm using https://github.com/bjoerge/debounce-promise