React-hook-form: Don't require field registration for partially rendered forms

[petrbela]

We have a very large form with 100+ fields, however, they're not all rendered at the same time. (It's essentially a wysiwyg editor ala webflow or figma.) We're currently using Formik but exploring this library because it solves some of the problems we're facing with Formik, namely performance.

I like and agree with most of the design decisions of this library except for the requirement to call register/unregister when the component is mounted, which means RHF only keeps track of fields that are rendered. As a result, when we hide some configuration menus (i.e. unmount certain fields), their value is essentially wiped out from the form state.

It looks like "Wizard Form / Funnel" example is designed to help solve the issue of managing hidden state but, unfortunately, it doesn't cover the use case of one large, partially rendered form. Even though we could move the state to a state management library to avoid losing the state of unrendered fields, we'd rather prefer to keep it in the form, as it is best equipped to do things like validations.

So, my question is: Is field registration something that the library requires in order to keep track of the field? Can RHF only update the state of fields that actually changed, keeping the existing state as is, even if the fields are not currently mounted?

[bluebill1049]

I like and agree with most of the design decisions of this library except for the requirement to call register/unregister

we actually don't required the user to invoke unregistered, it's automatic.

Is field registration something that the library requires in order to keep track of the field? Can RHF only update the state of fields that actually changed, keeping the existing state as is, even if the fields are not currently mounted?

That's up to your implementation. I worked on a similar task at work, what i did at work was using state lib to capture those input values and render inputs partially with their value (which is what you mentioned above). alternatively you can hide the inputs' visibility, if none of these helps then this is probably not the right tool for your work.

[thehappycoder]

I've encountered the same issue. react-hook-form is great but, unfortunately, doesn't work well in this scenario (in both controlled and uncontrolled modes). In my case, I need to keep errors state.

[bluebill1049]

@thehappycoder can you provide more context and potential examples for me to take a look? React hook form embrace native HTML forms, I am pretty sure there will be a solution for this as we can build anything with native form and vanilla JS.