Lets make a better react form
4 likes5,290 views
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 a better React <form /> Jay Chung
- 2. Jay Chung Front End Developer @TrendMicro github.com/xJkit twitter.com/xJkit
- 3. 3W1H • Why do you need a better <form /> • When to use a better <form /> • What is a better <form /> • How to use a better <form />
- 4. WHY • Why do you need a better <form /> • When to use a better <form /> • What is a better <form /> • How to use a better <form />
- 5. <form /> in React is simple
- 8. <form /> in React is simple without validations
- 9. <form /> in real world is complicated with validations with multi fields with multi forms
- 11. Sync Validation (Controlled Input) Show Error Message
- 12. Input value states Error message states
- 13. A lot of handle functions
- 14. Prevent submission When errors occur
- 15. Too much states and 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 do you 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 do you 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 do you 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 do you 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
- 24. Class component Functional component
- 25. feature controlled uncontrolled one-time value 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. HOC in Redux
- 28. Form UI Component Input value states Error message states Handle functions Component Enhancer
- 29. Validate as you need Validation Functions <form /> <form /> <form /> <form />
- 30. WHAT • Why do you 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 do you 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 />
- 33. Common Input Textfield Validate as you need (like plugins!) Validation Functions
- 34. Data flow in Redux 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
- 37. “to create a scalable, 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 provides minimal APIs for you Controlled input (only add with handleChange)
- 39. Formik comes with a few helpers <Form />, <Field /> to save you key strokes and make forms less verbose.
- 40. redux free smaller gzipped size( 9.2k > 22.5k) naming conventions from redux-form HOC pattern V.S
- 42. Michael Jackson - Never Write Another HoC
- 43. The Problem with HOC
- 44. The Problem with HOC Indirection which HOC provides which props? Naming Collision Two HOCs that try to use the same prop name will collide and overwrite one another
- 46. HoC Pattern
- 47. Render Props Pattern The render prop gives us the state we need to render whatever we want here
- 48. Render Props Pattern Instead of using a HOC, we can share code using a regular component with a render prop!
- 49. What Render Props Solves 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 to Render Props
- 51. Formik HoC to Render 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>}>
- 53. validator.js • https://github.com/chriso/validator.js/ • A library of string validators and sanitizers • Check available a list of validators 9k 45458/day
- 54. joi • https://github.com/hapijs/joi • Object schema 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. joi 6k 57016/day
- 56. joi 6k 57016/day • username a required string 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 • Dead simple 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. Yup 1.1k 700/day
- 59. Formik loves Yup! Special validationSchema prop for Yup
- 60. V.S redux free smaller gzipped size( 9.2k > 22.5k) naming conventions from redux-form HOC pattern render props approach special validationSchema with Yup!
- 61. “wait…I just released a 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