[39] Taking the Pain Out of Forms in React
In any application, not just Javascript based ones, user input is one of the foundational pieces for user interaction with the application, the server, and with others across the web. In order to capture user...
In any application, not just Javascript based ones, user input is one of the foundational pieces for user interaction with the application, the server, and with others across the web. In order to capture user input, you need forms. In this episode, we’ll explore the box form support provided by React with the basic HTML form elements like input, textarea and select, as well as libraries that have been developed to enhance form creation, as well as to perform validation.
Links
Resources
- https://reactjs.org/docs/forms.html
- https://reactjs.org/docs/uncontrolled-components.html
- https://react-hook-form.com/
- https://github.com/tannerlinsley/react-form
- https://formik.org/
Show Notes
- HTML + CSS as a basis for creating websites
- Javascript leads to enabling more user input and interactivity options
- Gathering user input without forms is possible, but forms make things simpler
- What are forms?
- Forms are the typical method we user input required to interact with an ecosystem
- Highly opinionated
- Many ways to do them
- Security, validation, accessibility etc.
- Lots to consider, what is the best way to do this in React?
- Working with What We Have in React and Javascript/HTML
- Controlled vs Uncontrolled
- Validation
- preventing server side hacking
- ensuring validity of data
- checking each field on submission
- regex
- Where vanilla react forms fail?
- large swathes of setStates or managing a large state object
- multiple types of validation, shared validation
- lots of vanilla code to cover existing and potentially future cases
- you end up just creating your own form framework, so why not use an existing one?
- Form Frameworks
- What are some options? Why do they exist?
- React Hook Forms
- Formik
- Recommended by React Team
- React Forms
- Part of the Tan Stack (React Query Family)
- React Hook Forms
- ControlledForm
- Controlled Components abstraction
- Restricted to using Form State for Component state??
- What are some options? Why do they exist?
- Validation Frameworks
- validator
- Yup for Validation