DEV Community

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

Brian Neville-O'Neill on October 30, 2019

Written by Siegfried Grimbeek✏️ Introduction As JavaScript developers, we are all aware of the complexities and intricacies that we may...

Read full post

Bill • Jan 22 '20 • Edited

Hey Justin,

as promised :) we have a new custom hook for Field Array.

react-hook-form.com/api#useFieldArray

example below:

import React from "react";
import { useForm, useFieldArray } from "react-hook-form";

function App() {
  const { register, control, handleSubmit } = useForm({
    // defaultValues: {}; you can populate the fields by this attribute 
  });
  const { fields, append, prepend, remove } = useFieldArray({ control, name: "test" });

  return (
    <form onSubmit={handleSubmit(data => console.log("data", data))}>
      <ul>
        {fields.map((item, index) => (
          <li key={item.id}>
            <input name={`test[${index}].name`} ref={register} /> 
            <button onClick={() => remove(index)}>Delete</button>
          </li>
        )}
      </ul>
      <section>
        <button type="button" onClick={() => append({ name: "test" })} >
          append
        </button>
        <button type="button" onClick={() => prepend({ name: "test1" })}>
          prepend
        </button>
    </form>
  );
}

Mathias Madsen Stav • Nov 1 '19 • Edited

So, did you test Formik 2 or the old one. Formik has had a rc out for a long time that was just released. Also for the performance tests, did you use fast field or just the field component? Would be nice to see the actual code you set up for the render tests as well, to know exactly how it was tested :) It seems you have the default validateOnChange setting, which is true.

Bill • Nov 27 '19

Hey Justin,

Thanks very much for your feedback, which I am 100% agree :) I think there are few things which I was try to highlight in the demo:

Performance: skip re-render onChange which trigger render at the root of your app (not sure if you notice the render counter on the top right)
Primitive API: let you compose and work your way through (be the driver)

but this is not the end of it, I am going to upload the example to the website and when I get some more free time, I can work on an abstract version of Field Array, which basically cooks that logic into the small component RHFArrayField. I will get to it, just matter of time :)

again much appreciated your feedback and time to looking into it.

cheer
bill

Bill • Nov 24 '19 • Edited

hey Justin, author of react hook form here, wondering how can we improve the experience here? let me know your feedback. In case you didn't see this section: react-hook-form.com/advanced-usage...

cheers
bill

Piotr Kumorek • Nov 8 '19 • Edited

Hey! Really cool article and definitely I'm going to play with the React Hook Form library :)

One notice - in the table with summary for performance comparison in cell representing re-renders for React Hook Form probably should be 3 instead of 316,797.

Bill • Nov 24 '19

thanks, Piotr, feedback welcome after you trying :)

Bill • Nov 25 '19

Thanks for the feedback! I think I do lack a good example of doing Field Array, which I should :). The lib itself doesn't expose any of those utility functions which you have mentioned and it's my purpose, I would prefer users to compose and work off their own logic and keep the API primitive. To work with react-hook-form with Field array, you need to maintain your own state to generate the fields and use the 'name' attribute as your name of the data source. I will be working on a good example and upload the website soon.

Comment deleted

Fabio Russo • Dec 23 '19

Inability to work with Form? I'm using React, since years, and I always work with Forms by myself...

Theofanis Despoudis • Oct 31 '19

Every now and then, a new React Form Library emerges that supposed to be the "best".
Before it was Redux-Forms, now is Formik, next is.... you get the point!
Only time will tell.

Bill • Jan 26 '20

This is a bug. Thanks for reporting the issue. I have resolved the problem. let me know if there is still an issue.

cheers
bill

Bill • Nov 27 '19

Here is the example which i have built: codesandbox.io/s/react-hook-form-f... let me know what do you think :)