Blog

Forms in React: Controlled Inputs, Form Actions, useActionState, useFormStatus and react-hook-form + zod

React 19's form actions (useActionState, useFormStatus, useOptimistic) are enough for small forms; for forms with line items and nested data, react-hook-form with a zod schema means less code and fewer renders. On the Bookstore order form we show the controlled version rendering on every key, an action resetting the form after a validation error, useOptimistic reverting by itself on failure, and Problem Details errors mapped to fields with focus moved to them.