Let’s simplify your complex forms! @kenza_iraki 

Intro • Hello, I’m Kenza !" • Curator of Let’s React (a React Native newsletter) • Founder of React MTL • Software Engineer @ Breathe Life • Hedgehog mommy 

No content

So what’s the matter with forms? • Boilerplate • Validation ✅ • Error handling ❌ • Submission 

Case Study: The “simple” sign up form 

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 

No content

No content

New requirements • Toggle between display/hide your password • Confirm password field • Real time display of password validation to the user 

No content

No content

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 

OK, fine, forms can get pretty crazy. So what can I do about it? 

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.) 

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) 

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) 

No content

Option #2: Final Form Subscription based form state management library that uses the observer pattern, built by the author of Redux Form 

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) 

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) 

Option #2: React Final Form 

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 

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 

No content

Yup 

Yup 

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 

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 

No content

Disclaimer ⚠ No animals were harmed in the context of this presentation @kenza_iraki