Building better forms with React 19
summary
React 19 reworks forms around an action API where synchronous functions are passed to the form action prop and receive a FormData object, eliminating manual preventDefault and manual FormData construction. The use action state hook returns the current state, a form action to attach or call, and an isPending flag, while use form status exposes parent form pending/data/method/action to nested fields. use optimistic enables immediate UI updates (example: chat replies shown before server confirmation). Recommended patterns: hybrid client+server validation, array-indexed dynamic fields, centralized parent state for multi-step flows.
AI-written summary · about
chapters (7)
- 0:00Introduction and speaker intro
- 1:06Challenges with traditional forms
- 8:18React 19's new form features
- 13:02useActionState hook explained
- 18:26useFormStatus and useOptimistic hooks
- 24:55Advanced form patterns in React 19
- 27:02Closing and future outlook
related talks
29mEverything You Need to Know About React 19
26mEverything You Need to Know About React 19
27mEnhancing Forms with React Server Components and React 19
28mEnhancing Forms with React Server Components
38mEverything You Need to Know About React 19
20mEnhancing Forms with React Server Components
20mWhat's new in React 19
27mEnhancing Forms with React Server Components