Slow startup time on forms with many inputs

I have a large form (100+ checkboxes) on one of my pages, it takes more then 3 sec to initial render it. After the initial render it works properly. I’ve checked what make it stuck, and looks like that the attachToForm method which each input is calling on mount and it triggers validation for each insert, maybe it is better to debounce the call for form. attachToForm -> validate(Input) (which calls to setState) -> validateForm (which calls to setState)

This chain of calls means that there are many formValidation (Arithmetic progression) which is redundant, cause onMount of the form it self there another call for validateForm

My test page: https://codesandbox.io/s/awesome-taussig-2c1c4

[felixmosh]

I’ve another path to fast render… there is redundant update due to call of the attachToForm onMount which changes the state of the component, I think that If the attachToForm will be called in the constructor and will return the initial state of the component this will improve start-up time.

Will experiment with this idea :]

[rkuykendall]

Debouncing makes sense. This seems like a really fun project. I might try it if nobody else gets around to it. How did you test your performance changes? I’m wondering if a simple .html “performance test suite” could be written which uses the UMD build?