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:

Implementing In App Updates For React Native Apps

Implementing in-app updates for React Native apps

Implementing OTA in-app updates in React Native apps can streamline the update process, preventing delays that hinder overall productivity.

Nelson Michael
Mar 1, 2024 ⋅ 7 min read
Exploring Stylex And The New Generation Of Styling Libraries

Exploring StyleX and the new generation of styling libraries

StyleX is a build-time, type-safe CSS-in-JS library recently open sourced by Meta. Explore StyleX and the evolution of styling libraries.

Ibadehin Mojeed
Feb 29, 2024 ⋅ 9 min read
Building High Performance Ecommerce Sites With Astro

Building high-performance ecommerce sites with Astro

Learn to set up a completely custom Astro ecommerce implementation that’s also highly performant and type-safe in this straightforward guide.

Onuorah Bonaventure
Feb 28, 2024 ⋅ 64 min read
Implementing Vector Search With Open Ai, Next Js, And Supabase

Implementing vector search with OpenAI, Next.js, and Supabase

Let’s build a Next.js app that implements vector search using Supabase and OpenAI to offer better search experiences for users.

Peter Ekene Eze
Feb 27, 2024 ⋅ 11 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