Form Provider Performance

[anik95]

Since the react hook form provider is based on context Api, for large nested forms it can cause performance issues due to multiple re-renders during state updates. I came across this section in the documentation: https://react-hook-form.com/advanced-usage#FormProviderPerformance, which basically uses react memo to stop additional re-renders unless the property isDirty changes.
I added the above implementation to my code and it has helped speed up the form performance a little but I now realize that my validations are not working since my memo does not check for updates to the formState.
https://codesandbox.io/s/provider-perf-forked-3jqlkj
In this example, we can trigger the required error message but can't remove it once user has typed something.

I also tried using the useFormState hook, but that means my entire form structure will re-render leading to slow performance. Is there any way out of this?

[anik95]

Can someone please let me know if I can use the wrap a large form split into several components with a number of 's instead of wrappint the entire form in one FormProvider. I believe that will minimize some of the unnecessary rerenders.

For example,

const methods = useForm()

return (

<FormProvider {...methods}>
   <ComponentB/>
   <ComponentC/>
</FormProvider />

<ComponentD />

<FormProvider {...methods}>
   <ComponentE />
   <ComponentF />
</FormProvider />

)

Is this a good practice??