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

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