Project 12: Product Landing Page

React Engineer

Builds on these lessons

Hook Form Intro Form Validation Strategies Zod Intro

Step 1 of 3

Project

react-hook-form Basics

Call const { register, handleSubmit } = useForm(), spread {...register("email")} onto an input, and pass handleSubmit(onSubmit) to the form's onSubmit. react-hook-form tracks values through uncontrolled refs internally, which is why forms with many fields stay fast — no state update (and re-render) on every keystroke.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useForm } from "react-hook-form";

export default function WaitlistForm() {
  const { register, handleSubmit } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="you@example.com" />
      <button type="submit">Join Waitlist</button>
    </form>
  );
}

← Previous Next →