DEV Community

Discussion on: How to Forms with React and Typescript

Collapse
 
southpaw profile image
Alex Gabites

Rather than reinventing the wheel, why not just use tried and tested libraries like Formik for creation and state management + Yup for validation?

Once you've used them, you'll never go back.

Collapse
 
steida profile image
Daniel Steigerwald • Edited

Because it’s much better. Check what io-ts does, it generates types, so everything is typed. The same for useForm, it generates fields from models. As result, we write much less much powerfull code.

io-ts is battle tested and useForm is so simple there is almost no room for errors.

Collapse
 
southpaw profile image
Alex Gabites • Edited

Assuming something is 'much better' without having tried the other things out there is a recipe for disaster and a pitfall that many developers fall into - its why people stagnate in the industry! πŸ˜‚

Using Formik and Yup you also get a fully typed interface for each field along with extra bits you'll find you use in every form such as per field touch management, error handling, submission states and more.

I don't see how you can make the claim that it is any less powerful than this useForm hook.

Thread Thread
 
steida profile image
Daniel Steigerwald • Edited

Don't get me wrong, I know both Formik and Yup. Yup does not support branded types nor option nor any other fp-ts types. But thank you for a comment, I should highlight it.

Anyway, please check the first five minutes of this talk youtube.com/watch?v=PLFl95c-IiU to understand my motivation. It's about F#, but with io-ts, we can model a much stricter schema in a similar way. For example, string which is only the email, not any string, or an array with the first item of type A and second optional type B. We can express a lot of business rules. Email and Verified email (both strings) with type safety. Hopefully, soon you realize that plain string or number types are close to any. I recommend you try both examples.

As for useForm. Once we use io-ts, for the reasons I mentioned, we can not use Formik, and honestly, that hook is so simple yet powerful, that we don't have to. There are also other design decisions why I did not make Formik clone, but that's for another blog post.