DEV Community

Cover image for Formik VS React Hook Form Part I
Doaa Shafik
Doaa Shafik

Posted on • Updated on

Formik VS React Hook Form Part I

Front End Engineers work a lot with forms and with the complexity of apps we need powered forms to help us managing the form state, form validation with nested levels, form verbosity.
Formik comes to solve all these problems.
Now we have a new library React Hook Form was released to compete.

Module Composition

Formik has nine dependencies
formik composition

React Hook Form has no dependencies
React Hook Form bundle

How easy is it to solve complex form constructs?

For Complex Features "Nested array" or "nested objects"
Formik handles it perfectly with validation on different events like onblur - onchange.

react-hook-form handle it but the validation of nested fields with "onblur" or "onchange" needs some works.

For simplicity, I see formik win cause it handles more stuff behind without the need to add it by yourself.

Controlled & UnControlled Component

Formik support Only Controlled Component but React-hook-form support both of them.

Controlled Component

is one that 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.
Controlled Component with RHF
Controlled Component with Formik

Uncontrolled Component

is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it.

feature uncontrolled controlled
one-time value retrieval (e.g. on submit)
validating on submit
conditionally disabling submit button
several inputs for one piece of data
dynamic inputs


Re-Rendering

We want to avoid unnecessary re-render cycles as much as possible, as this could lead to major performance issues as an app grows.
image-rerender-formik & react-hook-form

Dependent Fields

With React Hook Form watch Function help you to watch specified inputs and return their values to determine what to render.

With Formik watching all fields enabled by default so you can remove or add fields depend on values prop.

Events

With React Hook Form Read Form Values inside events.

note: getValues() will not trigger re-renders or subscribe to input changes.


With Formik you can read form values with values prop.

Summarize

feature formik react-hook-form
Size 12.6kB 5.2kB
Weekly Downloads 1,314,511 638,419
Dependencies 9 0
Open Issues 498 6
React Native
TypeScript
Class components
Clear documentation
Yup integration


Compare Both with Examples, See Formik VS React Hook Form Part II

Top comments (5)

Collapse
 
peacechen profile image
Peace Chen

People say that Formik slows down on complex forms. Anyone else experience that?

Collapse
 
valerii15298 profile image
Valerii Petryniak • Edited

Hello. Just few days ago faced problem. I am using big form with 50+ nested fields and when I type, - it very slow. FastField doesn't help. Developers of Formik working on next version to fix this problem(unnecessary re-renders). There is issue with Formik in GitHub github.com/formium/formik/issues/342
For me I decided to try react-hook-form because heard that it has better performance with large forms(it uses uncontrolled components, and has much less rerenders).

Collapse
 
doaashafik profile image
Doaa Shafik • Edited

Thanks For Your Comment,
I didn't face it before but I test it with 30 fields and it works fine.
to test :
1- check that there are no changes that force rerender like dispatch action or update state.
2- check the version of Formik especially for FastField API, it works in version 2.2.6.

Collapse
 
starptech profile image
Dustin Deus • Edited

Thanks for the summary. Size and performance are relative. The most important aspect is intuitiveness. You should answer precisely the question: How easy is it to solve complex form constructs?

Collapse
 
doaashafik profile image
Doaa Shafik • Edited

Really appreciate your comment.
I update the article with a little description for which one is easy to use.