Enhancing Forms with React Server Components and React 19
summary
Demo builds a live form using React 19 server components inside Next.js app router with Prisma, Zod and Tailwind, showing server actions wired to the extended form element, automatic scrolling via a tiny client component, and real backend validation with a hard max message count (5 then tested to 8). It uses useActionState and useFormStatus to show pending and errors, implements useOptimistic for immediate UI updates, revalidates with revalidatePath, and works without JavaScript.
AI-written summary · about
chapters (15)
- 0:00React Server Components intro
- 2:15React 19 form features
- 5:27Setting up the demo environment
- 6:32Server action for submission
- 9:24Auto-scroll form
- 10:29Zod validation
- 13:40useActionState feedback
- 15:08Toast for errors
- 16:30Prevent form reset
- 17:13Pending states with useActionState
- 18:42Progressive enhancement
- 19:45Reusable SubmitButton
- 22:13Reset messages server action
- 23:35Optimistic UI updates
- 25:41Summary
related talks
20mEnhancing Forms with React Server Components
28mEnhancing Forms with React Server Components
27mEnhancing Forms with React Server Components
26mThe Art of Building Modern Dynamic Forms
27mBuilding better forms with React 19
25mRe-Form the future. Rethinking Form Validations in React
45mReact Server Components: A New Way to Build Fast and Interactive Web Apps
01mMeet Aurora Scharff