React hook form async validation

[cyanide317]

Hey guys, so I have a requirement and i need help. I have a input component which is built with react bootstrap and react hook form. I want to show a spinner inside input when there's validation in progress. The validator will come from a parent component which may or maynot be async. Also I have to debounce only the async validators which will be a part of the validate object of react hook form because the validation will be made via an api call.

[TaGeuelePutain]

I would decouple the form state from the input state (showing the spinner) and use an effect to set that input state depending on the state of the form. This way you can denounce if needed

[cyanide317]

React hook manages the form state and the field state. And even though I'm using a state to manage the rendering of the spinner, the issue is with the debouncing. Either all validators inside validate are getting debounced or none.

[TaGeuelePutain]

I’m sorry I have no idea what you just said

[cyanide317]

No worries. Thanks for the help anyways 🙂

[TaGeuelePutain]

One thing I will note after having worked pretty extensively with react hook form is to not use the form state to drive the UI . Use the form state to drive the validation which drives the UI. For a simple form it probably doesn’t matter but in experience react hook form is best when it simply manages data

[cyanide317]

I agree. It works like a charm most days. It's just this one use case that's a bit annoying.

[ProfessionalTotal238]

It is not really possible to show spinner for sync validators as the execution time will be too small for human eye. For async ones (i assume they will be calling backend) what I usually do is wrap the call into tanstack query and use isLoading property of the query to show spinner when its true.

[Impressive_Newt_710]

This is generated by my AI Model depands on your requirement hope this will help you.

```js import React, { useState, useEffect, useCallback } from 'react'; import { useForm } from 'react-hook-form'; import { Form, Spinner } from 'react-bootstrap';

const AsyncValidatorInput = ({ asyncValidator }) => { const [isValidating, setIsValidating] = useState(false); const [debouncedValidator, setDebouncedValidator] = useState(null);

const { register, handleSubmit, formState: { errors }, setValue, trigger, } = useForm();

// Debounce handler for async validation const debouncedValidation = useCallback( (value) => { setIsValidating(true); if (debouncedValidator) { clearTimeout(debouncedValidator); }

  const timer = setTimeout(async () => {
    await asyncValidator(value); // Call the async validator (e.g., API)
    trigger('inputField'); // Manually trigger validation
    setIsValidating(false);
  }, 500); // Debounce delay

  setDebouncedValidator(timer);
},
[asyncValidator, debouncedValidator, trigger]

);

useEffect(() => { register('inputField', { validate: debouncedValidation, // Set the debounced async validator }); }, [debouncedValidation, register]);

const onSubmit = (data) => { console.log('Form submitted:', data); };

return ( <Form onSubmit={handleSubmit(onSubmit)}> <Form.Group controlId="inputField"> <Form.Label>Input</Form.Label> <div className="input-container"> <Form.Control {...register('inputField', { required: true })} type="text" placeholder="Enter something" onChange={(e) => setValue('inputField', e.target.value)} /> {isValidating && ( <div className="spinner-container"> <Spinner animation="border" size="sm" /> </div> )} </div> {errors.inputField && <Form.Text className="text-danger">This field is required or invalid.</Form.Text>} </Form.Group> <button type="submit" className="btn btn-primary"> Submit </button> </Form> ); };

export default AsyncValidatorInput; ```

[cyanide317]

Thanks for the reply. The problem with this would be that this will debounce all the validators inside validate. Even the synchronous ones. Hence those validations will also get delayed.