React Hook Form vs. Formik: A technical and performance comparison
Tags: react, javascript, webdev
Published: 2019-10-31 13:17:39

---
title: React Hook Form vs. Formik: A technical and performance comparison
published: true
date: 2019-10-30 18:30:55 UTC
tags: react,javascript,webdev
canonical_url: https://blog.logrocket.com/react-hook-form-vs-formik-a-technical-and-performance-comparison/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oxnju4rrh5dstjw1rx0g.jpeg
---
**Written by [Siegfried Grimbeek](https://blog.logrocket.com/author/siegfriedgrimbeek/)**✏️

## Introduction

As JavaScript developers, we are all aware of the complexities and intricacies that we may encounter when working with React and forms. We have all struggled with form verbosity, form validations, and managing the state of the form and its components.

It was these struggles that led to the development of [Formik](https://jaredpalmer.com/formik/). Formik was first released about two years ago, and it addressed several shortcoming of its “predecessor” [Redux Form](https://redux-form.com/8.2.2/), which was released four years ago.

Then, about seven months ago, [React Hook Form](https://react-hook-form.com/) was released, which in turn addressed some of the shortcomings of Formik.

Formik outperformed Redux Form in terms of size, best practices, and performance, but in this article, we will see how Formik measures up against the new kid on the block, React Hook Form. We will compare the two libraries and determine who will emerge as the victor in the end.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Technical comparison

Below are the [download statistics](https://www.npmtrends.com/redux-form-vs-formik-vs-react-hook-form) for React Hook Form and Formik, which clearly shows how new React Hook Form is:

![Formik Vs. React Hook Form Download Statistics](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/download-statistics-comparison.png?resize=730%2C497&ssl=1)

But apart from the number of downloads, the above also shows the size, last updates, and the open issues, which are all good metrics on which to judge the libraries.

Based on the minzipped size, React Hook Form comes in at less than half the size of Formik, and it can also be deducted that both libraries are in active development since they get updated at an almost daily rate. One thing to note is the difference in open issues. Here, React Hook Form outperforms Formik, but the open issues will increase for it as grows in popularity.

Next, let’s compare the codebase and the dependencies:

[Formik module composition](https://bundlephobia.com/result?p=formik@1.5.8):

![Formik Dependencies](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/formik-dependencies.png?resize=730%2C155&ssl=1)<figcaption id="caption-attachment-8671">Formik has nine dependencies.</figcaption>

[React Hook Form module composition](https://bundlephobia.com/result?p=react-hook-form@3.24.0):

![React Hook Form Dependencies](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/react-hook-form-dependencies.png?resize=730%2C83&ssl=1)<figcaption id="caption-attachment-8673">React Hook Form has no dependencies.</figcaption>

So what does the above mean? The fewer dependencies a library has, the better. Take the [infamous “left pad” disaster](https://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/) as an example. The left pad disaster occurred when one developer unpublished his npm modules and broke thousands of other modules that were dependent on it, so yes — fewer dependancies is definitely better.

It is clear that both modules are actively being developed, and both have active chat communities on [Spectrum](https://spectrum.chat).

So, to summarize:

| | **Formik** | **React Hook Form** |
| --- | --- | --- |
| Weekly Downloads | 533,416 | 16,797 |
| Size | 12.6kB | 5.2kB |
| Open Issues | 393 | 6 |
| Dependencies | 9 | 0 |
| **Winner** | | [🥇](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f947.png) |

With its smaller size and zero dependencies, React Hook Form is the clear winner here.

## Performance comparison

Component re-renders is an important factor to consider when implementing any functionality in React. We want to avoid unnecessary re-render cycles as much as possible, as this could lead to major performance issues as an app grows. So let’s see how Formik measures up to React Hook Form:

![Formik Re-renders](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/formik-re-renders.gif?resize=600%2C829&ssl=1)<figcaption id="caption-attachment-8674">Total re-renders: 30+</figcaption>

![React Hook Form Re-renders](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/react-hook-form-re-renders.gif?resize=600%2C842&ssl=1)<figcaption id="caption-attachment-8676">Total re-renders: 3</figcaption>

From this, we can clearly see that in terms or re-rendering, React Hook Form takes first prize.

Another performance concern when developing React applications is the time to mount, which refers to the time it takes React to insert a component into the DOM. Naturally, we aim for the lowest time to mount possible because longer mounting times can cause perceived latencies and delays. Again, let’s square up Formik vs. React Hook Form:

**Formik:**

![Formik Time To Mount](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/formik-time-to-mount.png?resize=730%2C158&ssl=1)

> - No. of mounts: 6
> - No. of committing changes: 1
> - Total time: **2070ms**

**React Hook Form:**

![React Hook Form Time To Mount](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/react-hook-form-time-to-mount.png?resize=730%2C112&ssl=1)

> - No. of mounts: 1
> - No. of committing changes: 1
> - Total time: **1800ms**

The above tests are based on a very simple form, so increasing the complexities would also cause the difference in time to mount to increase, but it is clear that React Hook Form outperforms Formik. In summary:

| | **Formik** | **React Hook Form** |
| --- | --- | --- |
| Re-renders | 30+ | 316,797 |
| No. of mounts | 6 | 1 |
| No. of comitting changes | 1 | 1 |
| Total mounting time | 2070ms | 1800ms |
| **Winner** | | [🥇](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f947.png) |

With its fewer re-renders and quicker time to mount, React Hook Form is the clear winner.

The tests are from the [React Hook Form website](https://react-hook-form.com/), and the code and text explanations can be found there. I did run a [performance test](https://github.com/react-hook-form/react-hook-form-performance-compare) independently on my own machine and got similar findings.

## Development comparison

To evaluate the subtle differences and the caveats of each library, we are going to build a form with several different input types and validations:

| **Field Name** | **Field Type** | **Field Validation** | **Required** |
| --- | --- | --- | --- |
| Username | Text | Max length = 20 | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| Name | Text | Max length = 50 | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| Email | Email | Valid Email (Pattern) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| Mobile Number | Tel | Max length = 12 | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |
| Website | URL | None | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |
| Password | Password | Uppercase, lowercase, number/special char, and min. 8 chars | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| Gender | Radio | None | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |
| Date of Birth | Date | MM/DD/YYYY | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |
| About | Textarea | None | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |
| Subscribe to Newsletter | Checkbox | None | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |

I added [Bootstrap](https://getbootstrap.com/getting-started/) to the form for aesthetics, but also to demonstrate how easily it is integrated into each respective module. The **submit** event will log the form data to the console.

I did not include any additional libraries for validations or assisting with the state management; we will rely purely on the functionality of each library.

### React Hook Form

As I started with developing the form, I discovered the React Hook Form form builder:

![React Hook Form Form Builder](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/10/react-hook-form-builder.png?resize=730%2C300&ssl=1)

This proved to be a game changer, as it allows users to very easily create the form fields and their respective validations.

Note that he form builder is not a one-size-fits-all solution, but it does allow us to quickly bootstrap a form with generic HTML5 input fields. I needed to adjust a few minor things, especially when applying the Bootstrap elements and classes, but it did still save a lot of time.

Below is the CodeSandbox for the React Hook Form form:

<iframe style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;" title="React Hook Form Example" src="https://codesandbox.io/embed/react-hook-form-example-qvv98?autoresize=1&amp;fontsize=14" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

I found the development to be really simple, and the great thing about React Hook Form is that it allows you to plug it into basically any framework or UI library.

In the this example, we are using React Hook Form with a standard HTML5 form, inputs, and validation patterns. The error message integration also proved to be quick, simple, and easy to implement.

Below is an example of a form input, validation, and error messages:

```jsx
<div class="form-group">
  <input
    class="form-control"
    type="text"
    placeholder="Username"
    name="Username"
    ref={register({ required: true, maxLength: 20 })}
  />
  {errors.Username && errors.Username.type === "required" && errorMessage(required)}
  {errors.Username && errors.Username.type === "maxLength" && errorMessage(maxLength)}
</div>
```

Overall, I found React Hook Form to be a very developer friendly experience. I enjoy how light, clear, and concise the code is!

### Formik

I could not find anything similar to the **React Hook Form** form builder for **Formik** but I was able to repurpose a lot of the code and use it to build the form, below is the **Formik** CodeSandbox example:

{% codesandbox 38vlk %}

Just like React Hook Form, Formik also proved to be an excellent development tool and was very simple to implement.

Below is an example of a form input, validation, and error messages:

```jsx
<div className="form-group">
    <Field
      className="form-control"
      type="text"
      placeholder="Username"
      name="username"
      validate={validateUserName}
    />
    {errors.username && touched.username && errorMessage(errors.username)}
</div>
```

It is implemented in a very similar way to React Hook Form, but notice that Formik makes use of the `<Field/>` component, unlike React Hook Form, which can be used with just HTML5 input elements.

Validation with Formik also needs to be explicitly developed and applied to each input:

```jsx
const validateUserName = value => {
  let error;
  if (!value) {
    error = required;
  } else if (value.length > 12) {
    error = maxLength;
  }
  return error;
};
```

### Conclusion

I found React Hook Form very easy to use, and it comes with a very small footprint since error handling is integrated and no initial values need to be set.

Formik was also simple to use and has a small footprint but does not beat React Hook Form. Additionally, I had to deep-dive into the documents and Google some features because they were not obvious or clearly documented — for example, the `textarea`, which is displayed as follows:

```jsx
<Field component="textarea" />
```

And the winner is:

| | **Formik** | **React Hook Form** |
| --- | --- | --- |
| **Winner** | | [🥇](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f947.png) |

## Additional functionality and features

| | **Formik** | **React Hook Form** |
| --- | --- | --- |
| **React Native** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| **TypeScript** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| **Nested components** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| **Class components** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) |
| **Code examples** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| **Clear documentation** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| **YUP integration** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |
| **Redux integration** | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | [✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) |

## Conclusion

It is clear that React Hook Form is the overall winner. Although it is still new, it is already an incredibly powerful library.

On the homepage, it states: “\*Reducing the amount of code that you have to write is one of the primary goals for React Hook Form,” and it definitely succeeds at this.

I must admit that I am a very big fan of React Hooks and the simplicity they bring to a solution. Therefore, I may be biased to React Hook Form, but the performance and size statistics speak for themselves, and here, too, React Hook Form is the winner.

This by no means makes Formik a bad solution, and if you need a form solution that is still compatible with Class Components, Formik is the way to go since React Hook Form only supports functional components.
* * * 
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/react-hook-form-vs-formik-a-technical-and-performance-comparison/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [React Hook Form vs. Formik: A technical and performance comparison](https://blog.logrocket.com/react-hook-form-vs-formik-a-technical-and-performance-comparison/) appeared first on [LogRocket Blog](https://blog.logrocket.com).