Debounce async validation function calls when mode is `onChange`

Hi guys — First of all, thumbs up for this super cool library 👍

I recently noticed that when the validation mode in onChange and I have a field which performs async validation, the function is called every time the field changes, which is kind of wasteful. It would be nice to have a debounce functionality so the async function isn’t called every time. The usual scenario si when a user is typing on a field and I only want to validate when the typing is done, I don’t care about validating on each keystroke. This behavior is slightly better IMHO than the onBlur alternative, because the user could get a feedback when the focus is still on the field that is being filled in. And the feedback shouldn’t “harass” the user.

Please see this example for reference (open the dev console and type in the Username field). https://codesandbox.io/s/react-hook-form-async-field-validation-50cyw

Is there a way I can achieve debouncing already? Am I missing something? Thanks for your attention.

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:29 (8 by maintainers)

Top GitHub Comments

25reactions

durchanekcommented, Apr 30, 2020

For anyone looking for an easy solution, I solved this with awesome-debounce-promise

validate: debouncePromise(async (value) => {
  return await validatePhoneNumber(value) || 'Phone number is invalid';
}, 500),

4reactions

trumbittacommented, Apr 23, 2021

For anyone looking for an easy solution, I solved this with awesome-debounce-promise
validate: debouncePromise(async (value) => {
  return await validatePhoneNumber(value) || 'Phone number is invalid';
}, 500),

Awesome and simple. Fantastic.