React Hook Form vs. Formik
This article is about my comparison of the two form libraries Formik and React Hook Form. At my work all our forms are built with Formik and Yup for validation. Other form and validation libraries like React Hook Form and Zod seemed to be a worthy replacement. Let’s investigate :)
How I started
At first I started my research by reading other articles comparing form libraries.
My next step was to create the same form with React Hook Form and Formik to see how different the implementation is. After this I replaced a simple and a complex form in our work code base with React Hook Form and was aiming to show that React Hook Form is a valid replacement for Formik in terms of performance, ease to use and developer experience. Here I share what I learnt and what my final judgement was.
Overall comparison with npm trends and bundle size and dependencies and active development and library principles.
Looking at npm trends, React Hook Form is the clear winner, as of 14. April 2024 it has double the amount of downloads (4.9 million) against formik (2.5 million). React Hook Form seems to get more updated and has less open issues and also more GitHub stars.
Looking at bundlephobia React Hook form is also the clear winner. React Hook Form has no dependencies and has a bundle size of 27.9kB and download time of 200ms (slow 3g). Looking at Formik with a size of 44.7kB and a download time of 264ms (slow 3g). 49% of Formik is self-composed, the rest 51% are dependencies of other libraries. React Hook Form is 23% smaller.
Both libraries have great documentation and are easy to understand and get started: React Hook Form Docs & Formik Docs.
Formik was built by Jared Palmar who built the library because he got frustrated with forms in 2017. Formik uses controlled components, which means that the form state is managed by the component.
React Hook Form was built for performance reasons by a group of developers in 2019. React Hook Form uses uncontrolled components and avoids re-rendering unnecessary parts of the form by registering input components with the register method.
Controlled components & uncontrolled components
Controlled components (Formik): With controlled components, you are very much in control of your form elements’ values. You can dictate how they go and what can and cannot be inserted. Controlled components may lead to more render cycles because every change to the input triggers a state update and a consequent re-render of the component.
Uncontrolled components (React Hook Form): Uncontrolled inputs are like traditional HTML form inputs: They remember what you typed. You can then get their value using a ref. Uncontrolled components sidestep this by not linking state changes to input updates, thus reducing the number of re-renders.
Testing with a simple form
GitHub examples of a simple form React Hook Form and Formik
React Hook Form
With the register method, you add name and onChange handler to the input element. The following shows what it does. It sets the ref, name, onChange and onBlur.
Formik
Looking at both forms, the implementation is pretty quick.
Testing with more complex forms & using an external UI component library
In the current code base an external UI component library is used. React Hook Form and Formik can be both easily used with external ui libraries. If the component doesn’t expose input’s ref or is not passed through, in React Hook Form you should use the Controller component, which will register your input. Controller acts as a “spy” on your input by reporting and setting value.
Comparison of a form with React Hook Form vs. Formik
Render count: Just looking at render count, the text input is rendering on every keystroke (every keystroke means +4 renders) on the Formik side, which sums up to less render counts on React Hook Form. Re-rendering React components unnecessarily can slow down your app and make the UI feel unresponsive but this never occurred in any of my testings. In render counts, React Hook Form wins with less renders.
Code lines: Replacing React Hook Form with Formik does not lead to less code lines, because of the Controller I had to add further lines.
Use of controlled vs uncontrolled components: Because the code base uses an external UI library, React Hook Form is used controlled mixed with uncontrolled components.
Error handling: It is pretty straightforward in both libraries.
Replacing Formik with React Hook Form:
What I found while replacing Formik with React Hook Form
- Naming is often the same in both libraries.
- Formik takes a name and an onChange handler, whereas React Hook Form in an uncontrolled component only needs {…register(‘firstname’)}
Replacing the validation schema with React Hook Form was not always smooth and I found that React Hook Form is stricter in types (which is a good thing). The validationSchema is not always applicable to be used in React Hook Form and needs adjusting types.
Zod vs. Yup
Zod, with its TypeScript-first schema declaration, offers a more integrated experience for TypeScript developers, providing both validation and static type inference. Yup, while versatile and straightforward, lacks the static type inference that can streamline TypeScript development.
Testing performance
Manual performance testing (playing with the performance tab on the dev tools). Just doing manual performance testing, Formik seemed to be quicker loaded in my test forms.
Lighthouse testing: React Hook Form was getting slightly better results in Performance which in my testing was Performance 85 (Formik) and 88 (React Hook Form).
Conclusion
Converting to React Hook Form, is it worth it? For an already written code base which is fairly big, I don’t think so.
I favour uncontrolled inputs and believe this simplifies the code structure and performance but most of the components used often will be controlled.
If you start on a fresh green field, I would recommend using React Hook Form also with Zod (as Zod has zero dependencies and does exactly the same as Yup).
