Excessive re-rendering from useForm hook

[rfdrake27]

Hello, I'm noticing that updating any value within the form will trigger a re-render of the parent component where the useForm hook is located. Even after destructuring the returned object from useForm, I'm noticing that functions such as getInputProps or addListItem are also being changed.

Are there plans to optimize performance of this hook? Such as wrapping functions in useCallback, or using refs?

Thank you Vitaly for the excellent library.

[rtivital]

I'll see what we can do, but that is not a priority.

[Arjan-Zuidema]

I think performance should be a priority? Rerenders can also cause a lot of DX frustration

[kaptinlin]

It re-render the whole form when interaction with form field

[thomasbeckford]

Im using component inside a form, and its re-rendering everytime I slide the mouse over the color grid.. I think its better to useRef in this case 😕 , right?

[ZenWhite]

Is there any solution to this problem?

[piyushsaha]

Hi, have you found any solution?

[BahaaZidan]

We had to move to https://github.com/react-hook-form/react-hook-form

[BahaaZidan]

With react-hook-form, it doesn't render the entire form when the user changes the value of one field. So yes, much better than Mantine.

[piyushsaha]

Are you using the Mantine input components?

I tried both useFormik hook from formik and the useForm hook from @mantine/form and in mid tier the performace is slow. Each keystroke is lagging.

[BahaaZidan]

Yes, I'm using react-hook-form with Mantine input components.

[piyushsaha]

Have you tried it with Date or Select components? I migrated to react-hook-form and I am having revalidatrion issues with these components. The revalidateMode is onChange and yet the error stays until submit is executed again.
Have you faced this?

[BahaaZidan]

no

[rcronin]

We are seeing this still an issue in Mantine 7.5.1. @rtivital - any guidance on how to limit the re-renders while using the useForm hook?

[rtivital]

This is expected behavior of controlled forms. If you want your form to be uncontrolled, use react-hook-form.

[gcsandesh]

@rtivital What about using mantine form with {mode: 'uncontrolled'} ? Will it limit the re-renders?

[rtivital]

yes

[rtivital]

All performance issues have been resolved with uncontrolled form mode – https://mantine.dev/form/uncontrolled/