Poor performance of inputs on mobile

skorphil / nextjs-form

Educational NextJs project to build a complex mobile-first form

MIT License

3 stars 0 forks source link

Closed skorphil closed 4 months ago

skorphil commented 4 months ago

Inputs on mobile slowly respond to user input. lag

skorphil commented 4 months ago

Works fine in storybook

skorphil commented 4 months ago

After audit in rect dev tools profiler, i noticed 2 causes of this

Major: use-form devtools slows significantly. I disabled it and it works normally now.
Minor: changing a state of the field (ie isDirty) causes RecordForm to rerender(thus every other component). This leads to freezing at the moment of the first input edit and when input returns to initial state

I think further tweaking may help (creating an external form provider or excluding formState from context)

For now lower the priority, cause the main problem was in use-hook-form devtools were enabled

skorphil commented 4 months ago

Fix everything by excluding unnecessary formStates:{dirtyFields} from children components

skorphil commented 4 months ago

skorphil commented 4 months ago

{ watch } = useForm() re-rendered root component RecordForm, causing horrible performance. While utilising useWatch() allowed to re-render only component which is using it Reddit thread: https://www.reddit.com/r/react/comments/1b0jhii/comment/ks897ms/?context=3 useWatch docs: https://react-hook-form.com/docs/usewatch