DEV Community

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

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...
bluebill1049 profile image
Bill • 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>
  );
}
Collapse
spoeken profile image
Mathias Madsen Stav • 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.

bluebill1049 profile image
Bill

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:

  1. 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)
  2. 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

Collapse
bluebill1049 profile image
Bill • 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

Collapse
qmixi profile image
Piotr Kumorek • 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.

Collapse
bluebill1049 profile image
Bill

thanks, Piotr, feedback welcome after you trying :)

bluebill1049 profile image
Bill

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.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
genta profile image
Fabio Russo

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

Collapse
theodesp profile image
Theofanis Despoudis

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.

bluebill1049 profile image
Bill

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

bluebill1049 profile image
Bill

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