Hey Gonzalo,

Very good points!

I agree, these are the three solutions I see as well and debounced onChange validation is the best solution in my opinion.

My thoughts:

Option A (onBlur)

Sync Validations - Pretty weird solution because of the UX quirk you mentioned
Async Validations - More appropriate because only one call will be made to the server when the user removes focus from the input element but still a little weird because the user has to figure out they need to click elsewhere to trigger validation

Option B (onChange with no debounce)

Sync Validations - Works fine, but as you mentioned, validations are run prematurely while the user is still typing
Async Validations - Pretty bad solution because the server will be spammed with requests every time the user types a letter

Option C (onChange with debounce)

Sync Validations - Good solution because validations will run once the user is done typing
Async Validations - Good solution because the server won't be spammed with requests

I was actually working on a debounce feature and sort of gave up because it mucked up the code quite a bit and i figured it would deter readers.

But, if i were to add anything else to this code, it would be a validateOnChangeDebounce parameter. A possible implementation might look like:

[
  validateOnChangeDebounce, 
  setValidateOnChangeDebounce
] = useState(0);
let debouncedValidate = useRef();
useEffect(
  () => {
    debouncedValidate.current = debounce(
      () => {
        form.validateFields(fieldsToValidateOnChange);
      },     
      validateOnChangeDebounce
    );
  },
  [validateOnChangeDebounce]
);
useEffect(
  debouncedValidate.current,
  [value]
);

No guarantees this code would work, but conceptually, I envision it working in that sort of way.

Thanks for the ideas!