This is the second part of the Getting Started with React Hook Form Series, The first part of the series stated the advantages of React Hook Form and how it can ease the building of forms in React, It also mentioned the new features that was added to the new release of React Hook Form which is the version 7 of the library.
In this part of the series I will do a comparison of React Hook Form and Formik which are the two most used React Form Libraries. This comparison is not to prove that Formik is not good, but it is to show the features of these two React Form libraries we have based on some key concepts. Sit back and read through and I know that you will learn a lot from this article😊
Basis of Comparison
These two form libraries will be compared based on some things which are;
1. Package Size and Composition
The first comparison factor is the package size and the number of dependencies both libraries have, React Hook Form has no dependency whereas Formik has nine dependencies and the lesser the dependencies the better the library is. Also for the sizes of these two libraries, React Hook Form is very small and the new released version 7 is about 8kb in size compared to the latest version of Formik which is of medium size of about 15kb. This makes React Hook Form faster than Formik because it is way smaller than Formik in size and it does not have any dependency.
2. Controlled and Uncontrolled Components
React Hook Form is designed to make use of uncontrolled components to avoid unnecessary re-rendering caused by user input and it also supports non controlled components but Formik supports just controlled components. And you might want to ask that what is the meaning of Controlled and Uncontrolled Components.
Controlled Components
Controlled Components takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
Uncontrolled Component
Uncontrolled Component stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
<input type="text" defaultValue="foo" ref={inputRef} />
React Hook Form gives the flexibility to use both Controlled and Uncontrolled Component.
3. Re-rendering
This is another major comparison factor between these two React Form Libraries, We want to avoid unnecessary re-render cycles as much as possible, as this could lead to major performance issues as an app grows. So let’s see how Formik measures up to React Hook Form;
React Hook Form
It has minimum re-render, it does not re-render as the local state changes,
From the image above we can see that React Hook Form has a total number of just 3 re-renders.
Formik
Formik re-renders according to local state changes which means as you type in the input. so the number of re-renders depends on the number of text you input.
From the image above we can see that React Hook Form has about 30+ re-renders.
This comparison shows that React Hook Form is better than Formik in re-rendering and this also makes it faster.
4. Mounting Time
A major concern when developing React applications is the time to mount, which refers to the time it takes React to insert a component into the DOM. Naturally, we aim for the lowest time to mount possible because longer mounting times can cause perceived latencies and delays.
Let's do a comparison based on this factor by using a simple form.
React Hook Form
This mounts just once and it takes about 1800ms to mount.
Formik
This mounted 6 times and it takes about 2070ms to mount.
This comparison was based on a simple form, now imagine if it was a more complex form. So React Hook Form outperforms Formik based on this comparison.
5. Validation
Every form used in a real life application requires validation in order to make it more usable and efficient.
React Hook Form
React Hook Form uses different types of validation, React Hook Form has an in-built validation and with this you don't need to learn a new type of validation, It also uses Yup which is a JavaScript schema builder for value parsing and validation. It also uses Zod, Joi, Superstruct. You are also chanced to build your validation yourself the way you want it to look like. All these makes React Hook Form a very nice Form Library to use in your next project.
Formik
Formik is also very nice for validation and it uses to methods of validating your form. The first method is by using Yup, I think this is the most used method of validating Formik form and Formik also made the provision for making developers to build their form validation by themselves.
These 5 technical comparison between React Hook Form and Formik shows the strength and some of the limitations of these React Form Library.
Conclusion
As stated earlier, this is the second part of the Getting Started with React Hook Form series. The third part will be a hands on experience with React Hook Form because we will be building some nice stuffs with it. I believe you have learnt a lot from this article and you now know about some of the technical features of React Hook Form and Formik. Anticipate the third part of this series and you can support me by clicking on the Buy me coffee Button at the top of this article. Thanks😍😍