React Hook Form

Overview

React Hook Form (RHF) keeps input values in refs instead of React state, so a form re-renders only when its validation state or a watched value changes. register connects an input, handleSubmit runs validation and calls your function with typed data, and a resolver plugs in a schema library such as Zod. These examples use Zod 4 (z.email()); with Zod 3 write z.string().email().

Instructions

Step 1: Install

npm install react-hook-form @hookform/resolvers zod

If npm stops with an ERESOLVE error about optional peer dependencies of @hookform/resolvers, rerun with --legacy-peer-deps, or use pnpm or yarn.

Step 2: Form with Zod validation

Give each input an id that matches its label, set defaultValues for every field (RHF warns about uncontrolled-to-controlled switches otherwise), and use setError for failures that only the server can detect. errors.root holds form-level errors.