Watch subscriber for errors/touchedFields/... objects #10895
-
Hi I've noticed that changes to the errors object for example don't cause a re-render.
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 !! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
It should cause a re-render if you subscribe to the const { formState: { errors } } = useForm()
// or
const { formState } = useForm()
const { errors } = formState |
Beta Was this translation helpful? Give feedback.
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 aProxy
object to make sure the updates are run only for the states that you're subscribed to. You can read more about it in theformState
rules section of RHF docs.You want to set
formState
as youruseEffect
array dependency and access the form state props you're interested in inside the setup code.