Let's simplify your complex forms!

If you’ve built an app with React or React Native, chances are you’ve had to build at least one form. From profile screens to login pages, forms are unavoidable, and let’s be honest, they’re not very fun to build. For each field, you need to hold the value in the state of your component, implement onChange and onBlur handlers, implement validation… that makes for a lot of boilerplate, and that’s just for simple inputs.

There are several libraries out there that attempt to simplify this process, from Redux Form, to React Form, to Formik, among others. In this talk, we’ll go over the existing solutions, how they stack up against each other, and what their limitations are.

Transcript

1. Let’s simplify your complex forms! @kenza_iraki
2. Intro • Hello, I’m Kenza !" • Curator of Let’s React (a React Native newsletter) • Founder of React MTL • Software Engineer @ Breathe Life • Hedgehog mommy
4. So what’s the matter with forms? • Boilerplate • Validation ✅ • Error handling ❌ • Submission
5. Case Study: The “simple” sign up form
6. The “simple” sign up form • 4 fields (email, password, name and phone number) • Validation on all fields • 2 api calls (sign up and then login) • Error handling
9. New requirements • Toggle between display/hide your password • Confirm password field • Real time display of password validation to the user
12. The more complex your form, the messier it gets • Optional vs required fields • Fields that depend on answers to other fields • Hide/display fields • Change default values • Make fields disabled
13. OK, fine, forms can get pretty crazy. So what can I do about it?
14. Option #1: Redux Form Redux-based solution to forms, which keeps everything form-related in your Redux state (fields’ values, currently focused field, previously focused fields, sync and async validation, errors, submission status etc.)
15. Option #1: Redux Form Pros • Single source of truth • Easily share form data between components • Since it uses Redux, you get great debugging tools out of the box • Very widely used (390k downloads / week)
16. Option #1: Redux Form Cons • Only makes sense if you’re already using Redux • Redux store is updated on every key stroke • Unnecessary and costly as your app grows • React prophet and Redux creator Dan Abramov said that “Form state is inherently ephemeral, so tracking it in Redux is unnecessary” • Business logic can get very complicated • Large bundle size (~ 26.7 kB minified + gzipped)
18. Option #2: Final Form Subscription based form state management library that uses the observer pattern, built by the author of Redux Form
19. Option #2: React Final Form Pros • Framework agnostic (can be used with React, Vue, Angular, vanilla JS…) • Zero configuration • Very small bundle (~ 4.6 kB minified + gzipped)
20. Option #2: React Final Form Cons • A lot of “magic” going on (I don’t like the Observer Pattern) • Hard to debug • The least widely used option (95k downloads / week)
21. Option #2: React Final Form
22. Option #3: Formik Form helper library that handles the 3 core things you need: • Getting values in and out of form state • Validation and error messages • Handling form submission
23. Option #3: Formik Pros •Zero configuration •Powerful validation with yup out of the box •Support for nested structures (e.g. address.city) •No magic - just a plain old React component •Relatively small bundle (~ 11.9 kB minified + gzipped) •Very widely used (500k downloads / week) •Recommended in the official React docs
25. Yup
26. Yup
27. Option #3: Formik Cons • Framework-specific (React/Native only) • Inflexible in some ways • Claims to only support 80% of use cases, so when getting to the last 20%, things get weird • On long forms using styled components and/or Material UI, there is a significant performance issue • The entire form validates on every key press
28. Conclusion • Redux Form is probably not a good idea for React Native apps • Final Form is okay if you’re fine with some magic • Formik is pretty good, but not one-size-fits-all
30. Disclaimer ⚠ No animals were harmed in the context of this presentation @kenza_iraki