Download as PDF, PPTX
Uploaded byYao Nien Chung
Lets make a better react form
The document discusses the complexities of handling forms in React, highlighting the need for a better form system to simplify validations, manage states, and reduce verbosity. It introduces alternatives like Formik and React Final Form, which address common issues with traditional form handling, such as controlled vs uncontrolled components and validation methods. Additionally, it compares various form libraries and their features, emphasizing the importance of separating UI from logic for better form management.
Lets make a better react form
- 1. Let’s make abetter React <form /> Jay Chung
- 2. Jay Chung Front EndDeveloper @TrendMicro github.com/xJkit twitter.com/xJkit
- 3. 3W1H • Why doyou need a better <form /> • When to use a better <form /> • What is a better <form /> • How to use a better <form />
- 4. WHY • Why doyou need a better <form /> • When to use a better <form /> • What is a better <form /> • How to use a better <form />
- 5. <form /> inReact is simple
- 8. <form /> inReact is simple without validations
- 9. <form /> inreal world is complicated with validations with multi fields with multi forms
- 10.
- 11. Sync Validation (Controlled Input) ShowError Message
- 12. Input value states Errormessage states
- 13. A lot of handlefunctions
- 14.
- 15. Too much statesand handle functions have nothing to do with UIs… same validation logic in different components tedious to wire up the components every time Too much repeated fields & controlled inputs hard to reuse same field in different forms almost the same fields repeat again & again..
- 16. WHY • Why doyou need a better <form /> • too verbose and complicated in real word cases • When to use a better <form /> • What is a better <form /> • How to use a better <form />
- 17. WHEN • Why doyou need a better <form /> • too verbose and complicated in real word cases • When to use a better <form /> • What is a better <form /> • How to use a better <form />
- 18. Large <form />makes you CRAZY
- 19. WHEN • Why doyou need a better <form /> • Too verbose and complicated in real word cases • When to use a better <form /> • while you meet a form with a lot of fields • What is a better <form /> • How to use a better <form />
- 20. WHAT • Why doyou need a better <form /> • Too verbose and complicated in real word cases • When to use a better <form /> • while you meet a form with a lot of fields • What is a better <form /> • How to use a better <form />
- 21. Let’s make <form/> CLEANER
- 22.
- 23.
- 24. Class component Functionalcomponent
- 25. feature controlled uncontrolled one-timevalue retrieval (e.g. on submit) ✅ ✅ validating on submit ✅ ✅ instant field validation ✅ ❌ conditionally disabling submit button ✅ ❌ enforcing input format ✅ ❌ several inputs for one piece of data ✅ ❌ dynamic inputs ✅ ❌ https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
- 26. HOC Functional component +Class container
- 27.
- 28. Form UI Component Input valuestates Error message states Handle functions Component Enhancer
- 29. Validate as youneed Validation Functions <form /> <form /> <form /> <form />
- 30. WHAT • Why doyou need a better <form /> • Too verbose and complicated in real word cases • When to use a better <form /> • while you meet a form with a lot of fields • What is a better <form /> • separate UI and logic • validate as you need • How to use a better <form />
- 31. HOW • Why doyou need a better <form /> • Too verbose and complicated in real word cases • When to use a better <form /> • while you meet a form with a lot of fields • What is a better <form /> • separate UI and logic • validate as you need • How to use a better <form />
- 32.
- 33. Common Input Textfield Validateas you need (like plugins!) Validation Functions
- 34. Data flow inRedux Form decorate form by reduxForm() Redux store Input values Error messages
- 35. What Redux-form includes •Simple Form • Synchronous Validation • Field-Level Validation • Submit Validation • Asynchronous Blur Validation • Initializing From State • Field Arrays • Remote Submit • Normalizing • Immutable JS • Selecting Form Values • Wizard Form … more detail in documentation
- 36.
- 37. “to create ascalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to you.” @ jaredpalmer
- 38. withFormik HoC HoC providesminimal APIs for you Controlled input (only add with handleChange)
- 39. Formik comes with afew helpers <Form />, <Field /> to save you key strokes and make forms less verbose.
- 40. redux free smaller gzippedsize( 9.2k > 22.5k) naming conventions from redux-form HOC pattern V.S
- 41.
- 42. Michael Jackson -Never Write Another HoC
- 43.
- 44. The Problem withHOC Indirection which HOC provides which props? Naming Collision Two HOCs that try to use the same prop name will collide and overwrite one another
- 45.
- 46.
- 47. Render Props Pattern Therender prop gives us the state we need to render whatever we want here
- 48. Render Props Pattern Insteadof using a HOC, we can share code using a regular component with a render prop!
- 49. What Render PropsSolves Indirection don’t have to wonder where our state or props are coming from. We can see them in the render prop’s argument list. Naming Collision There is no automatic merging of property names, so there is no chance for a naming collision.
- 50. Formik HoC toRender Props
- 51. Formik HoC toRender Props have full access to React's state, props, and composition model no need to map outer props to values render prop accepts your inner form component, which you can define separately or inline totally up to you <Formik render={props => <form>...</form>}>
- 52.
- 53. validator.js • https://github.com/chriso/validator.js/ • Alibrary of string validators and sanitizers • Check available a list of validators 9k 45458/day
- 54. joi • https://github.com/hapijs/joi • Objectschema validation • allows you to create blueprints or schemas for JavaScript objects (an object that stores information) to ensure validation of key information. 6k 57016/day
- 55.
- 56. joi 6k 57016/day • username a requiredstring must contain only alphanumeric characters at least 3 characters long but no more than 30 must be accompanied by birthyear • password an optional string must satisfy the custom regex cannot appear together with access_token • access_token an optional, unconstrained string or number • birthyear an integer between 1900 and 2013 • email a valid email address string Validation Schema
- 57. Yup 1.1k 700/day • https://github.com/jquense/yup • Deadsimple Object schema validation • Object schema validator and object parser • The API and style is stolen heavily inspired by Joi • A leaner in the same spirit without some of the fancy features
- 58.
- 59. Formik loves Yup! SpecialvalidationSchema prop for Yup
- 60. V.S redux free smaller gzippedsize( 9.2k > 22.5k) naming conventions from redux-form HOC pattern render props approach special validationSchema with Yup!
- 61. “wait…I just releaseda redux form without redux!”
- 62. React Final Form 1.1k 100/day •https://github.com/final-form/react-final-form • Only peer dependencies: React and 🏁 Final Form • 2.7k gzipped
- 63.