I typically use plain React for forms. But I just converted a form to use Formik.

Results: (LOC = Lines of code)
Plain React: 130 LOC, 46K
Formik: 105 LOC, 58K
Formik + Yup (validation): 104 LOC, 74K

So Formik reduced my code by ~25%. Nice! 👍

Let's talk tradeoffs (thread)

The notable cost is bundle size. It's an extra 12K minified to use Formik. It’s an extra 28K minified with Yup for validation. React-dom is 32K minified. So that's a big size bump.

Worth the cost? Depends how many forms you have...

2/x

Formik reduced the size of a single component containing a simple form by 2.4K. So, once your app has 5 forms, Formik “pays for itself”. After ~5 forms, it actually reduces the bundle size.

If you add Yup too, you need around a dozen forms before Formik + Yup "pays off"...

3/x

Summary: For small and simple projects, I’d avoid the overhead.

But for larger internal apps with many forms, or for large teams, Formik’s enforced, documented patterns and reduced custom coding pays off and *reduces* the app's total bundle size. 🔥

Great work @jaredpalmer 👍

Just posted the full review on my blog: https://www.bitnative.com/2020/08/19/formik-vs-plain-react-for-forms-worth-it/

View original on X