What's your favorite React form handling library?
I've recently started using React Hook Form and absolutely love it. It's different than most form handling libraries in that it embraces "uncontrolled forms". This makes it very performant, as it doesn't have to re-render the form UI on every change. It also has on the of the most beautiful and helpful docs I've ever seen, including code comparisons with other form libraries and a visual form builder.
Trending on Indie Hackers
I am using just the regular useState for each field, with occasional useDispatch when dealing with more complex data. Works so far.
I looked into different react form libraries, but I usually find that dealing with their limitations is not worth the hassle, and I prefer to keep it simple and stupid.
Yeah sometimes it’s nice to just use React. That’s what I did before finding React Hook Form.
This comment was deleted 5 years ago.
Big fan of React Hook Form!
This! I like it better than Formik.
Hi Gabe, thanks for starting this group.
Re: your post, when is form re-rendering a performance issue? Really complex forms with lots of fields? I don't think I've ever run into this problem.
Well, i think it depends.
For example in my case, I had massive performance issues.
Because I was using Redux for state management.
I store the phone info, including a short review for each phone.
And as for UI:
Had multiple tabs: a tab with phone list, another one with phone review list.
Each item had an edit button that would toggle the form. With each key stroke, the state was updated and phone list was re-rendered, inducing a delay.
That was a bad approach for me.
So i switched to local state (react controlled form), and the issue was fixed.
But I imagine if the form component had multiple children or if it was somewhere higher in DOM would trigger re-renders
Yeah that makes sense. I think I read somewhere that putting form state in Redux is not recommended unless you absolutely have to do it.
I use Redux for state management in general but I always put form data in component state.
I am actually using Shopify’s react-form in one of my latest projects:
https://www.npmjs.com/package/@shopify/react-form
It’s pretty simple but works well for regular forms (fill, submit, validate) and supports dirty state tracking.
React Hook Form is the best one. It’s funny how redux-form inspired Formik which in turn lead to React Hook Form. Seems like each era of React gets its own form library that reflects the current best practices.
redux-form ➡️ Higher order Components
Formik ➡️ Render props
React Hook Form ➡️ Hooks
Here’s a tip: use hidden fields as a way to keep track of “global” form state, like which step of a multi-step form you’re on. Oh and useFormContext to avoid prop drilling.
React Hook Form was actually the first form handling library that I used, but I didn't like it. I found the docs confusing, the API inelegant, and I always got the nagging feeling that things were harder than they needed to be.
I eventually dropped it and moved to Formik. It might be slower performance-wise, but their documentation is legit, they also use hooks, and their components are super composable -- which is very important for me in reducing redundancy.
for UpStamps I am using Formik works like a charm and very easy to integrate. Is what the website says "Build forms in React, without the tears"
I use formik, and since I am using ant design as well I use https://github.com/jannikbuschke/formik-antd
+1 for Formik + Yup for validation.
:+1: for Formik, we were doing everything manually with
useState, but this has really simplified our forms.Formik. It has awesome configuration so you can create custom/complex inputs easily.
ant design. Last time when my work with Careem(acquired by uber) I've built a lot of form with ant design form. Their API is very rich.
But I will look into React Hook Form
This comment was deleted 5 years ago.