Building performant forms in React over a hundred fields

[devarsh]

Hi, One thing that really bothers me is when I'm building forms with react is that if you want your forms to have features such as watchers, dependent values, you have to store the form state in context (i.e global shared state) and have your fields subscribe to the context and react to cross-field changes, now since you're using context, upon every update to your state stored in context- all the fields would be rerendered, and there is no escape from that, yes for performance you can use shouldComponentUpdate or memoization with a custom updater, and now you have to make sure your custom updater takes into account all the fields mutations that are important to you, otherwise, things won't rerender when needed, it still feels a hacky way of doing things.

So I was wondering if there are any approaches you've taken which might skip context, perhaps a pub-sub model, and tracking object mutations and triggering updates and only update the required fields.

If you've any thoughts or ideas I would like to hear.

I've made the hacky react way dynamic form but still is not the ideal solution: https://github.com/devarsh/miniApps/tree/master/wordTemplate/ux

Thankyou.

[stefanwille]

Check out Formik and its FastField component - https://jaredpalmer.com/formik/docs/api/fastfield