U

Upskills

  • Tutorials
  • Showcases
Sign In

© 2026 Upskills. All rights reserved.

Privacy PolicyTerms of Service
DiscordX
  1. Home
  2. Tutorials
  3. React Forms Done Right
Indie Dev ToolkitPart 4 of 9

Chapter 2: Modern Frontend Development with React

React Forms Done Right

Vu Nguyen
Lead Engineer, NAB - Jun 13, 2026

This is Part 4 of the Modern Frontend Development series. Forms are not just about UI; they are a complex state problem with validation, async checks, server round-trips, and accessibility overlapping each other.

I'll walk through the form mental model and build three practical archetypes: a lightweight React 19 server action form, a multi-step wizard using TanStack Form, and a high-performance editable table. Finally, we'll compare the trade-offs of native React 19 versus client-side libraries.

Prerequisites

  • Comfortable building React components with hooks (useState, useEffect)
  • Familiar with TypeScript fundamentals (types, generics, inference)
  • Part 3 (Client and Server State) recommended. Form submission ties back to server-state mutations and optimistic UX

React Forms Done Right

REACT 19Server Action• FormData payload• useActionState()TANSTACK FORMClient State Engine• Field Array Roster• Row-level isolationZOD VALIDATION PIPELINEemail: z.string().email()workAuth: z.discriminatedUnion(...)roster: z.array().superRefine(...)FORM STATE LEDGERvalues: { email: "ada@..." }touched: { email: true }dirty: trueerrors: {}isValid: trueCOMMIT & SUBMIT

About the author

Vu Nguyen

Vu Nguyen

NAB, Lead Engineer

I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building products for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.

Upskills is where I share practical, real-world knowledge to help others build and maintain projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.

GitHubXXXLinkedin
From the Upskills newsletter

Hope you liked React Forms Done Right. Want the next one in your inbox?

Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.

  • Real-world, production-grade examples
  • No spam, ever
  • Unsubscribe in one click

We respect your privacy. Unsubscribe anytime.