issue: Needed to click submit twice for errors to appear when there is no parameter and using formState: { errors } directly.

[RoseannePeeters]

Version Number

^7.49.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/trusting-archimedes-fly5hk?file=%2Fsrc%2FApp.js%3A64%2C11

Steps to reproduce

1. Click on "Submit form".
2. See that there were no errors thrown when no data was input. (Not expected behaviour).
3. Click on "Submit form" again.
4. See errors appear.

Expected behaviour

The errors should appear on the first click.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Edge

Relevant log output

N/A

The issue is able to be fixed with the following

Add a parameter errors to the handleError function.

Code of Conduct

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

[Moshyfawn]

The errors form state is not updated when the onError callback is executed. The re-render to notify your component of the errors form state change has not happened at that point.

The onError callback receives the updated errors as its argument, so you can use it to reference the correct errors state.

  const {
-   formState: { errors },
  } = useForm()

- function handleError() {
+ function handleError(errors) {
    for (const error of Object.values(errors)) {
      toast.error(error.message)
    }
  }

[RoseannePeeters]

The errors form state is not updated when the onError callback is executed. The re-render to notify your component of the errors form state change has not happened at that point.

The onError callback receives the updated errors as its argument, so you can use it to reference the correct errors state.

  const {
-   formState: { errors },
  } = useForm()

- function handleError() {
+ function handleError(errors) {
    for (const error of Object.values(errors)) {
      toast.error(error.message)
    }
  }

Yes I understand, like I stated in my post you can fix it with adding that parameter.
But I was wondering if it was by design or not.

Thanks

[Moshyfawn]

Yes I understand, like I stated in my post you can fix it with adding that parameter.
But I was wondering if it was by design or not.

Thanks

It is the expected behavior with how RHF priorities render optimization at this time