Watch subscriber for errors/touchedFields/... objects

[yishay-at-bay]

Hi

I've noticed that changes to the errors object for example don't cause a re-render.
For example

useEffect(() => {
  console.log(errors);
}, [errors]);

In this case, if the errors object will be changed (say we had one field with error before and now we have two fields with errors), then it won't trigger the effect. I guess it is because the errors object keeps its identity and only the values inside it are changing.

Is it possible to make some watch function for errors/touchedFields and the other state objects like we have for field's values? This way the user can opt into the option of causing a re-render whenever the errors object for example changes

Thanks !!

[Moshyfawn]

It should cause a re-render if you subscribe to the errors form state value before reading it

const { formState: { errors } } = useForm()
// or
const { formState } = useForm()
const { errors } = formState

[yishay-at-bay]

Hi @Moshyfawn, I tried it, and a re-render is happening, but it doesn't cause the effect to run
For example, in this code sandbox you can type into the two fields, then delete the text from one of them and then you will see the console.log from the effect. But when you will delete the text from the second, the errors object updates, but the effect will not run

What am I missing here? Is there a way to cause the effect to run each time the errors object changes?

Thanks !!

[Moshyfawn]

Ah, I see! Sorry, I was focused on the "re-renders" part and the useEffect part has slipped my mind 🫣

The behavior you're seeing is a "side-effect" of the formState performance optimization; it's wrapped in a Proxy object to make sure the updates are run only for the states that you're subscribed to. You can read more about it in the formState rules section of RHF docs.

formState is updated in batch. If you want to subscribe to formState via useEffect, make sure that you place the entire formState in the optional array.

You want to set formState as your useEffect array dependency and access the form state props you're interested in inside the setup code.

const { formState } = useForm()

useEffect(() => {
  console.log("The errors: ", formState.errors);
}, [formState])

[yishay-at-bay]

@Moshyfawn it works 😃 Thanks a lot for your explanations and the huge help !! This is the second time you've helped me and I improved so many usages of RHF thanks to your tips

[Moshyfawn]

I'm glad I could help! 🥳