Streamlined Form Management in React with Formik
summary
Shows how Formik replaces manual controlled-state and event handlers with context hooks (useField, useFormikContext) and schema validation via Yup integration, cutting boilerplate so a two-field login fits on one slide. Demo app implements both vanilla and Formik versions, tests with React Testing Library remain the same except a wrapped fireEvent.click in act, submission uses async fetch and Formik’s isSubmitting flag, and Formik docs are at formik.org.
AI-written summary · about
chapters (14)
- 0:00Introduction and speaker intro
- 0:41Problem with React forms
- 3:55Adding validation to forms
- 6:04Introducing Formik
- 7:50Creating Formik-aware fields
- 9:39Validation with Yup
- 13:16Q&A on custom validation
- 15:03Testing forms with Formik
- 18:55Async submission handling
- 21:23Advanced field integration
- 23:31Comparing form libraries
- 26:42Performance and popularity
- 27:44UI component libraries
- 28:29Closing remarks
related talks
54mTaming Forms in React
22mGet your forms hooked with react-hook-form
46mHow not to hate your life when dealing with forms
25mRe-Form the future. Rethinking Form Validations in React
27mEnhancing Forms with React Server Components and React 19
55mThe State of React’s State in 2019
20mEnhancing Forms with React Server Components
28mEnhancing Forms with React Server Components