issue: React Hook Form : validation error object is empty during first submit

[CodAffection]

Version Number

7.45.4

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/relaxed-sun-gc35yk

Steps to reproduce

It's working perfectly fine in codesandbox. but not in my local machine I've tried in chrome, edge browser. and I'm getting this output.

Screenshot : https://photos.app.goo.gl/UxZ2zmk86fubmQAZA

The errors object from formState and handleSubmit second callback parameter should be same. they both represent validation errors in form fieds. but formState.errors is an empty object in first form submit event.

Expected behaviour

both errors object should be same even in first submit.

What browsers are you seeing the problem on?

Chrome, Edge

Relevant log output

No response

Code of Conduct

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

[Moshyfawn]

Do you destruct the errors property from the formState in your OG codebase like you did in the codesandbox?

const { errors } = formState

...as opposed to

formState.errors

[CodAffection]

@Moshyfawn yes, I destructured errors property.
Do you find any other possible reason?
@bluebill1049

[Moshyfawn]

I'm not sure yet. This seems to be related to a re-render problem, and the typical cause for the value to say behind like this is often due to incorrect value subscription, i.e. the value wasn't read before use.

[Moshyfawn]

OK, I've not looked at the handleSubmit source code in a while 🤦

The state's being updated at the end of the handleSubmit execution, so you won't get formState update until after the submission process has ended.

The formState is going to be up to date at the time of the next component render due to the excision order.

I think it's going to be one of those "API design limitation". @bluebill1049, correct me of I'm wrong.

[CodAffection]

@Moshyfawn, seems like you are correct. Thank you so much for looking into the source code.

[bluebill1049]

thanks @Moshyfawn yes that's right.