Form Libraries for React

Another really important part of the application will be the leveraging of forms in order to capture data, both for persistency, but also normal flows that will require searching, filtering and other similar interactions.

It is due to this that this prototype is focusing entirely on seeing the capabilities of two popular Form Libraries for React:

  • Formik (integrated with Yup)

  • React Hook Form

This prototype has installed both of them and shows different examples of their capabilities alongside the type of code that is needed to be written to get them working.

Project Rundown

This project was created with vite, following the steps:

  • pnpm create vite react-forms (Select React > Typescript + SWC)

  • pnpm install

After scaffolding the initial folder structure, we added the dependencies neccesary to start consuming the echarts library.

  • pnpm i formik

  • pnpm i react-hook-form

The folder structure:

- react-forms
|-- src
|   |-- FormikDemo.tsx
|   |-- App.tsx

We have the App component that renders a FormikDemo, as the name implies it will leverage all the tools that Formik provides to show a demo of how a fully setup form in Formik will look and behave like.

Cross Cutting Concerns

Formik

In Formik’s case, besides the basic tutorial rundown, it has many other examples in the docs about async calls, about instant-feedback on type, API requests for other field validations or calculations, besides Material UI’s integrations. So it covers many other use cases that will vary heavily on the requirements of the application.

React Hook Form

React Hook Form adheres to HTML standards for validation, besides accounting for performance and integration with multiple validation libraries (besides Yup). It also integrates heavily with typescript and allows for a true type safe dev experience.

Besides this, the library has tons of utility classes that help with type-safety, alongside integration with both other UI component libraries, even services that can then hit API endpoints. And it also integrates nicely with React Native.

Extra Notes

There’s definitely way more options when it comes to form libraries, each with their own quirks, pros/cons. A good video to get a really high level of them would be:

When it comes to integrations and performance React Hook Form shows that it makes great usage of these concerns. (Besides being actively maintained and being the most popular form library).