Formik vs React-Hook-Form

[Kinetic-Pulse]

Formik vs React-Hook-Form

Which do you prefer and why?

• React-Hook-Form seems simpler and faster, any reason to stick with Formik?

Does Formik have anything in mind for making entire forms not reload the whole time?

[fabb]

Formik v2 includes a useFormik hook, maybe try this out? https://jaredpalmer.com/formik/docs/api/useFormik

Imho it would be nice if Formik was split in to 2 libs, one base lib with this hook, and a second lib built on top of the former one that includes the Formik context and the features that build on top of it (<Field> and the like). I would only use the former since I don't care for the latter.

[ahce]

@Kinetic-Pulse I just migrated to react-hook-form, is amazing. Thanks!

[jaredpalmer]

@fabb formik is fully treeshakeable, so you only use what you use. In addition, Formik 2 needed to be backwards compatible with v1. In the future, we may split up the package once I release formik native.

[fabb]

@jaredpalmer all right, thanks for the info.

Btw. React-Hook-Form has a very nice feature, it supports to read out html5 validation attributes from inputs for use in its own js validation logic. This suggests using more web standards to users which is a good thing for accessibility. Maybe this could be inspirational for Formik too? https://react-hook-form.com/api#register

[fabb]

This is nice too in React-Hook-Form:

By default when the user submits a form and that contains an error, the first field with an error will be focused.

[liketurbo]

Formik is easier setup with existing library components (from experience: react-input-mask, react-text-mask). React-hook-form is delightful when you working with your own components.

[muhaimincs]

I'm not sure why.. but I just migrated too

[igo]

Here are my 2 cents: I used Formik and then migrated to react-hook-form because Formik is very slow with large forms. I found couple bugs in react-hook-forms which were fixed over the time. Unfortunately during development I realised that I cannot use react-hook-forms in some complex forms because there are some missing features (ie. arrays of arrays, dependencies between fields, not that good support of typescript ...). I would recommend you to use react-hook-forms if you need large and simple forms, otherwise use Formik.

[torian257x]

https://github.com/react-hook-form/react-hook-form/discussions?discussions_q=useFieldArray&page=1

I was using react hook forms only (kinda new to react) and I will try out formik now - or at least have a go with it to see how big of a problem performance really is for my uses cases.

afaik nested arrays 1 level deep are now solved in useFieldArray. Recursively nested? not sure.

it would be great if @bluebill1049 could implement his version of "SlowField" as opposed to FastField from formik ( https://github.com/formium/formik/issues/671 ) to be able to do what one needs to do in those special cases where something extra is needed with rendering, dependencies etc

[torian257x]

so I'm back... I did go into formik a bit more. And well, that it is sluggish slow after 20-30 fields is disappointing at best. Not sure what apps people are writing with it. See about how many people have problems with it (including me right of the bat) https://github.com/formium/formik/issues/671 <FastField itself is still slow. Now you have to write workarounds because formik is so slow so only a few fields are editable at a time otherwise the browser goes poof.

what react hook forms is missing is boilerplate code imho and recursively nested arrays I guess. With boilerplate code I mean error message components, field components that I don't want to write myself.

I as well don't like the visibility problems of variables I seem to have in formik. But maybe that is a newbie problem? I don't have the variables and functions available on the component level, I have to hand them around via refs or other things.

If you @igo could expand what dependencies you couldn't do that would be very interesting to me because now I am tending back to react hook forms

[NikolaGrujicic]

I have used recently both libraries on a project, some of the important things to consider when choosing a form library are( personally I prefer to use react-hook-form ):

• Number of stars on GitHub and weekly downloads on NPM
• Performance
• Development - Is it well maintained
• Customisation and extendibility
• Size of the library
• Open issues
• Updates - how often is it updated

If you would like to get more deep into this topic you can check out this blog post where the two libraries are compared in detail: https://www.framelessgrid.com/react-hook-form-vs-formik-react-form-library-comparison-in-2021/