2021-07-10
1538
#react
Siegfried Grimbeek
8577
Jul 10, 2021 ⋅ 5 min read

React Hook Form vs. Formik: A technical and performance comparison

Siegfried Grimbeek Web developer, open source enthusiast, agile evangelist, and tech junkie. Currently hacking away at the frontend for Beerwulf 🙌

Recent posts:

Authentication And Authorization In Astro

Authentication and authorization in Astro

Implement secure authentication and role-based authorization in Astro using JWT, SSR, and Astro middleware for protected routes.

Emmanuel John
May 6, 2025 ⋅ 23 min read
How To Use Custom Fonts In Tailwind CSS

How to use custom fonts in Tailwind CSS

Walk through how to use Google Fonts and locally installed fonts in your Tailwind projects to help you improve your project typography and design consistency.

Peter Ekene Eze
May 6, 2025 ⋅ 11 min read
here's why everyone's going crazy over Zod 4

Here’s why everyone’s going crazy over Zod 4

Zod 4 is not just an update; it’s a leap forward for schema validation in TypeScript that truly lives up to the hype.

Popoola Temitope
May 5, 2025 ⋅ 4 min read
A guide to the CSS cursor property

Creating custom mouse cursors with CSS

Learn what custom cursors are and how to use CSS and JavaScript to create custom cursors that will give your website a creative edge.

Samson Omojola
May 5, 2025 ⋅ 8 min read
View all posts

19 Replies to "React Hook Form vs. Formik: A technical and performance comparison"

  1. Timing is everything! Formik just released v2 which is built on React Hooks. I think an update to this comparison is in order. Obviously the dependency graph may not change so much but moving away from the React class components _should_ help the re-render bloat.

    Either way, thanks for a great comparison!

  2. react-final-form is worth checking out too. It’s by the same author as redux-form. It’s very light and highly performant, it’s also been rewritten with hooks

  3. React Hook Form author here 🙂
    Unfortunately, that’s not the case when you switch from class component to functional in turns of re-rendering (if re-rendering is what you concerning). There are fundamental differences between react hook form and other controlled form libs out there. You can read more here:

    https://react-hook-form.com/faqs/

    React Hook Form, Formik or Redux Form?

  4. Given that React Hook Form creates uncontrolled components, doesn’t that make it difficult to do instant (dynamic) field validation? How do you alert user when they’ve typed in maximum number of characters accepted by a field? Have a field “B” that is hidden unless field “A” is a specific value (one of several radio buttons)? Disable the submit button until all required fields have valid values? Do you have to descend to DOM-level solutions (js events or whatever) to handle these? This comparison article is quite rudimentary.

  5. Hi Steve,

    Thanks for the feedback, I will definitely keep it in mind when doing a comparison post again. You are totally correct, the article does only scratch the surface of the infinite possibilities which one can explore. But my goal was really to provide a broad overview of both frameworks, which should serve as a foundation, and then one can fill in the specific gaps if necessary. It might be valuable to do a deep dive into the React Hook Form and discuss some more complex scenarios.

    Regarding your questions above, this can be very easily achieved with out of the box functionality of React Hook Form, like Bill said, have a look at the advanced usage docs, there are some great examples. Let me know if you get stuck, we can check it out!

    Cheers,
    Sieg

  6. You can use HTML5 inputs as well with Formik, so this sentence: “It is implemented in a very similar way to React Hook Form, but notice that Formik makes use of the component, unlike React Hook Form, which can be used with just HTML5 input elements.” is not true.

    1. You can use Formik v1 completely headless as well and render whatever components or HTML5 elements you desire. This is not a new feature in V2.

  7. When I run code for both formik and react-hook-form, formik renders only once but react-hook-form renders number fields touched in form.

  8. Could it be that the Formik re-render example is showing a lot of re-renders because by default it re-renders onChange for the underlying component? I think you can configure a component to re-render onBlur, in which case you’d get the same number of re-renders as React Hook Form – just one.

Leave a Reply