Forms in React
What problems am I facing with forms in React? Do our forms need a 're-form'?
May 05, 2023
typescriptjavascriptreact
To be fair, this comes from Formik. I feel like react-hook-form can solve a few of these issues
Formik
I've been using Formik for a while now, and as much as I love it, it feels pretty abandoned. This issue for v3 roadmap has a lot of people complaining about it.
- I want to disable all fields in a form. Might need to make my own context for that. If Formik had a plugin API this would be so much more easier. See this
- I want to set fields with numeric values, as well as fields with dot paths. This is quite tricky as Formik uses lodash's
toPath
internally. See this issue. Also related: this issue
What do I want to do about it?
There are a few options from here
- Improve formik - some people are probably already doing this, and it's possible a forked rewrite of formik as v3. Has happened with libs like react-codemirror-2, visjs etc. A problem: this approach potential to end up with bad code at the core that no one wants to touch.
- Write a wrapper on top of react-hook-form (or something similar). This might work out well as it can give a formik-like API. the only issue with RHF is it uses proxies. So to access data, you need to use it somewhere in code first. Lots of people report this issue, & the suggestion is usually to do a "console.log" to get updated values. To me, it seems like it should be impl detail with an opt-out maybe. Leads to unexpected behaviour.
- Write my own minimal form lib, which can help with most of Formik-like usecases.
I feel like if react-hook-form's impl details can be fixed, it's a great base for a form library. To be explored further.