Understanding the Fundamental Differences between react-hook-form and @mantine/forms

[ramil-thrive]

Hello,

I am reaching out to understand the fundamental differences between the react-hook-form and @mantine/forms libraries, and specifically why the react-hook-form-mantine binding was created.

From my exploration of both libraries, it appears they offer similar functionalities in terms of form state management, validation, error handling, etc. However, I am interested in understanding the key motivations and reasons behind the development of react-hook-form-mantine.

Here are a few questions to guide the discussion:

1. What are the main advantages of react-hook-form over @mantine/forms that necessitated the creation of react-hook-form-mantine?
2. Are there any specific features or aspects of react-hook-form that are not adequately handled by @mantine/forms?
3. If I am already using Mantine in my project, what would be the benefits of switching to or incorporating react-hook-form-mantine?

I appreciate your help in understanding these differences. Your insights will be valuable in helping me and others decide which library or combination of libraries to use in our projects.

Cheers! 🍻

[aranlucas]

It all really boils down to performance.

@mantine/form is an equivalent solution to Formik, but created with mantine components in mind. They both use context as a way to capture field values. https://github.com/mantinedev/mantine/blob/master/src/mantine-form/src/FormProvider/FormProvider.tsx#LL16C31-L16C31

When you change the question to "Why React Hook Form vs Formik?" you'll find many more resources that will help answer your question. The simple answer is, for every keystroke, the form re-renders when using Formik or @mantine/form while when using React Hook Form it won't (it only re-renders at the field level embracing uncontrolled forms).

Check this https://blog.logrocket.com/react-hook-form-vs-formik-comparison/. To give you a demo of what that might look like, check out the demo under https://react-hook-form.com/ - Isolate Re-renders. Also this FAQ link might help answer some more question: https://react-hook-form.com/faqs#PerformanceofReactHookForm. @mantine/form is what they refer as a "Controlled" Form.

Switching over to React Hook Form will give you the BIGGEST benefit if you plan on having large forms. It's a significant slowdown when you have many fields and it needs to re-render every keystroke.

[aranlucas]

You can also check what I mean with these 2 sites

• https://7z1f4p.csb.app/ - Mantine/form https://codesandbox.io/s/sweet-babbage-7z1f4p?file=/src/App.tsx
• https://krflqj.csb.app/ - RHF mantine https://codesandbox.io/s/react-hook-mantine-krflqj?file=/src/App.tsx

Open react dev tools and highlight "Highlight updates when components render." https://jsramblings.com/how-to-check-if-your-component-rerendered-and-why/

[ramil-thrive]

Thank you very much for the detailed explanation! @aranlucas appreciate your help!