issue: validation results are not displayed immediatly

[ketain]

Version Number

7.33.1

Codesandbox/Expo snack

https://codesandbox.io/s/hopeful-chatterjee-571glh

Steps to reproduce

1. open CS
2. click on any input
3. remove the input value
   ( validation result appears in console, but input is not marked accordingly )
4. type a single character into the input
   ( validation result now marks input even though it has become obsolete )

Expected behaviour

Validation results should be displayed immediatly upon detection. On the other hand, validation results which are not true any longer should not be rendered.

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

https://react-hook-form.com/api/useform

please use the following debug code to check why it's the case, hook form derive error from schema validation result.

[ketain]

I checked it out and added the debug code to the CS.
It shows that the correct validation does indeed happen. Yet the ui is not updated.
In the meantime I figured out that if you actively subscribe to formState (e.g by adding console.log(methods.formState.errors); to App()) it does work.
But I thought I would subscribe to formstate automatically when getting the whole return value of useForm()?

(Thanks for the fast reply by the way, Much appreciated!)

[Moshyfawn]

https://react-hook-form.com/api/useform/formstate#rules

formState is wrapped with a Proxy to improve render performance and skip extra logic if specific state is not subscribed to. Therefore make sure you invoke or read it before a render in order to enable the state update.

You can pass the entire formState from useForm(),useFormContext() oruseFormState() directly to getFieldState()

const { register, formState } = useForm()
getFieldState('test', formState);

[ketain]

Thanks! That solved it. Tried to figure that out for days. I even read that part and didn't realise it's significance.