Forms libs
Context
Choosing the right library to build forms in our SPA's
Things to consider
Time to setup, time to understand
Support & community
Customisability
Compatibility with MUI
Type support
Field arrays, conditions, other more advanced features
Options
Choosing between https://react-hook-form.com/ and https://final-form.org/react
In general
React-hook-form:
Pros:
Lightweight and easy to use.
Great performance due to its optimised rendering process.
Minimal re-renders, making it suitable for complex forms.
Supports both controlled and uncontrolled inputs.
Supports validation at the field level and form level.
Supports multiple validation rules and custom validation.
Integrates well with Material UI controls.
Provides excellent documentation and community support.
Cons:
Fewer features compared to react-final-form.
May require a bit of setup for some features, such as custom error messages and field arrays.
Fewer built-in integrations with third-party libraries.
Might be difficult to set up complex forms
React-final-form:
Pros:
Comprehensive and feature-rich.
Provides out-of-the-box support for advanced features like conditional fields, field arrays, and custom error messages.
Provides a highly flexible and customisable API.
Integrates well with Material UI controls.
Offers more third-party library integrations than react-hook-form.
Provides excellent documentation and community support.
Cons:
Can be more complex and require more setup time.
May not perform as well as react-hook-form for complex forms.
Can result in more re-renders due to its form state management.
Formik:
Pros:
Most popular choice according to npm downloads / github stars
Can be balance between two options above - less complicated to use then final form but for controlled forms by design
Integrates well with Material UI controls.
Offers a lot of third-party library integrations t
Provides excellent documentation and community support.
Cons:
Possible issues with performance with big complicated forms
In the past known as quite buggy
Integration with MUI
React-hook-form: https://www.npmjs.com/package/react-hook-form-mui
Can support strict field name typings
React-final-form: https://www.npmjs.com/package/mui-rff
Does not support strict field name typings (there's a way of achieving something like that but would have to be written manually without this library with extensive wrappers)
Formik: https://www.npmjs.com/package/formik-mui
Does not support strict field name typings
Decision
Today all three of these proposed libraries are very powerful solutions which include all the future requirements.. Unfortunately the situation with setting up type-safe names for the field components is still terrible and even tho all three of the libraries support it in some (usually complicated repetetable way) only viable integration with MUI supporting this is react-hook-form-mui. The choice comes down to performance, easy-to-use, validations, setting up complex forms..
Last updated
Was this helpful?