Formik VS React Hook Form Part I
Tags: react, html, formik, reacthookform
Published: 2021-02-07 10:29:56

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](https://formik.org/) comes to solve all these problems.
Now we have a new library [React Hook Form](https://react-hook-form.com/) <span>was released to compete.</span>
<br/>
<h3>Module Composition</h3> 
[Formik has nine dependencies](https://bundlephobia.com/result?p=formik@1.5.8)
![formik composition](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/formik-dependencies.png?resize=730%2C155&ssl=1)

[React Hook Form has no dependencies](https://bundlephobia.com/result?p=react-hook-form@3.24.0)
![React Hook Form bundle](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/react-hook-form-dependencies.png?w=730&ssl=1 730w, https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/react-hook-form-dependencies.png?resize=300%2C34&ssl=1 300w)
<span />

<h3>How easy is it to solve complex form constructs?</h3>
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.

<h3>Controlled & UnControlled Component</h3>
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](https://react-hook-form.com/api#Controller)
[Controlled Component with Formik](https://formik.org/docs/api/field)

######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.
<table>
  <thead>
    <tr>
      <th>feature</th>
      <th>uncontrolled</th>
      <th>controlled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>one-time value retrieval (e.g. on submit)</td>
      <td>✅</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>validating on submit</td>
      <td>✅</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>conditionally disabling submit button</td>
      <td>❌</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>several inputs for one piece of data</td>
      <td>❌</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>dynamic inputs</td>
      <td>❌</td>
      <td>✅</td>
    </tr>
  </tbody>
</table>
<span/><br/>
<h3>Re-Rendering</h3>
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](https://i.ibb.co/z8GNRbz/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f664232704a2e706e67.png)
<span/>
<h3>Dependent Fields</h3>
With React Hook Form [watch Function](https://react-hook-form.com/api#watch) 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.
<span/><br/>
<h3>Events</h3>
With React Hook Form [Read Form Values](https://react-hook-form.com/api#getValues) inside events.
######note: getValues() will not trigger re-renders or subscribe to input changes.
<span/>
With Formik you can read form values with values prop.
<span/><br/>
<h3>Summarize</h3>
<table>
    <thead>
        <tr>
            <th>feature</th>
            <th>formik</th>
            <th>react-hook-form</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Size</td>
            <td>12.6kB</td>
            <td>5.2kB</td>
        </tr>
        <tr>
            <td>Weekly Downloads</td>
            <td>1,314,511</td>
            <td>638,419</td>
        </tr>
        <tr>
            <td>Dependencies</td>
            <td>9</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Open Issues</td>
            <td>498</td>
            <td>6</td>
        </tr>
        <tr>
            <td>React Native</td>
            <td>✅</td>
            <td>✅</td>
        </tr>
        <tr>
            <td>TypeScript</td>
            <td>✅</td>
            <td>✅</td>
        </tr>
        <tr>
            <td>Class components</td>
            <td>✅</td>
            <td>❌</td>
        </tr>
        <tr>
            <td>Clear documentation</td>
            <td>✅</td>
            <td>✅</td>
        </tr>
        <tr>
            <td>Yup integration</td>
            <td>✅</td>
            <td>✅</td>
        </tr>
    </tbody>
</table>
<span/>
Compare Both with Examples, See [Formik VS React Hook Form Part II](https://dev.to/doaashafik/formik-vs-react-hook-form-cases-part-ii-4omi-temp-slug-5264081?preview=e42653392509226354193f68854f7627a98ae96e623513580c189866db12b7ce03c9b7205e1d83b0254124ae37f2ea476b0a0f1a560c9d7da54188e6)