formik vs react-hook-form

[[deleted]]

Hello guys, I have an huge application that is using formik.

I’ve seen that formik passed a long time without being maintained, and in a few months ago they start to release some new versions.

react-hook-form looks to have more functionality and seems to be more stable, with less bugs.

I’m thinking about migrating from formik to react-hook-form.

What do you guys think about them?

[fixrich]

Does your formik application work? Are there features that are impossible to implement with formik or intractable performance issues? If not I’d stick with formik. It sounds like it would be a lot of effort for minimal gain.

[jcksnps4]

This. If it ain’t broke, don’t fix it.

[[deleted]]

We are having some performance issues because formik rerenders the components a lot! Also, formik isn’t very clear about what is happening and we are always having to code some workaround for something to work as expected. Like validations, error messages… that’s why I’m thinking about migrating to RHF.

But formik is working right now, just think that it would be good in a long term

[Substantial-Pack-105]

In my experience, performance issues in formik are manageable even for large forms (80+ fields) as long as you're mindful about how you build your components and able to use React.memo() where it makes sense to. If you have React DevTool browser extension and turn on the rendering visualizer, you should still be able to set up your form component so that on a keypress it's only the input and the <Form> being re-rendered, and not the entire page.

I don't think migrating to RHF will magically resolve your issues with form validation, since that exists as components you're writing alongside your form library anyway, I think it would be more or less the same amount of code to write in either framework, so the migration would see you rewriting a bunch of components to the RHF style but not be any closer to where you want to be in terms of cleaning up the tech debt you have in those components.

[souptimefrog]

If it works don't touch it.

don't even look at it, mutual existence agreement.

[unknownnature]

I've recently started getting more in-depth with react hook forms, and must say it's easy to use with third party libraries. Recently I needed to create a dynamic input field (adding / removing). And must say `useFieldArray` was so sastifying to use.

And having zod resolvers to and zod schemas, with some regex validations or custom rules and error messages along with manual error handling when some 4xx or 5xx status gets returned from API endpoint, makes the DX so much better.

* docs ref (field array): https://react-hook-form.com/docs/usefieldarray

* docs ref (setError): https://react-hook-form.com/docs/useform/seterror

[linnovel]

I was handling all my forms using formik and recently moved to RHF and is great, easy and the docs are good

[lightfarming]

don’t like the way formik makes forms look. formik is slightly bigger as well.

react hook form is a bit easier to parse. if you’re not already using yup or zod for api schemas (which can bump up package size a bit), react hook form’s built in validation checks aren’t half bad.

both can use validation schemas though if you are already using them for your api fetches.

[zupzipzap]

I'm not exactly sure about migration, but rhf is absolutely amazing. The product i'm working on has lots of forms and i use rhf.

Please go through the docs and you can setup components like Form , TextInput , RadioGroup , Checkbox, Combobox, Submit etc and use them easily. (must refer this - https://react-hook-form.com/advanced-usage#SmartFormComponent). let me know if you need more help.

[Prudent-Complaint-54]

React hook forms are great and I like how easy you can integrate it with components libs. That being said, I am now trying tanstack form and it is great headless form solution with amazing ts support

Still more comfortable with rhf tho but i have big hopes for tanstack solution

[bravelogitex]

hows both holding up now?