A hand-made useForm with register and handleSubmit
The component reads like the React Hook Form version: register spreads the props, handleSubmit guards the callback. The first render shows no errors; the empty submit from code shows both. Unlike RHF, this version is controlled, so every keystroke re-renders the form.
React Hook Form manages field registration, submission, errors and touched state for you (mostly with uncontrolled inputs), and Zod describes your data's rules as a schema you can reuse on the client and the server; for small forms plain React is enough.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Extend the hand-made useForm to return a reset() function that puts the defaults back and clears touched and submitted.
Write a Zod schema (non-live) for a contact form: name required, email valid, message 10–500 characters, and show how to validate a request body with it.
Explain it without notes
Why do form libraries exist? Name the repetitive parts they handle.
How do register and handleSubmit work in React Hook Form?
What is a schema library like Zod for, and why is sharing a schema with the server valuable?
When would you not use a form library?
Preview
Console
Nothing logged yet.Expected console output
errors shown: {}
errors shown: { email: 'Enter an email like name@example.com', password: 'Use at least 8 characters' }