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?