React Academy · Lesson

Getting Started with React Hook Form

Install RHF, call useForm, register inputs, and handle form submission.

Getting Started with React Hook Form is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will install React Hook Form, call useForm, register inputs, and handle form submissions without managing individual state variables.

Why React Hook Form?

Traditional controlled forms in React require a useState per field and onChange per input. React Hook Form (RHF) manages all of this internally using uncontrolled inputs, giving you a simpler API with fewer re-renders.

Installation

Install the package. No additional peer dependencies are required for basic use.

npm install react-hook-form

useForm Hook

Call useForm() to get the register function, handleSubmit wrapper, and formState. These are the three core pieces you need for any form.

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Registering Inputs

Spread the result of register('fieldName') onto each input. RHF attaches a ref and event handlers to the input under the hood — no value or onChange needed.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

The onSubmit Callback

handleSubmit validates all fields and calls your onSubmit callback with a typed data object only when the form is valid. If validation fails, it populates formState.errors instead.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Default Values

Pass `defaultValues` to useForm to pre-populate form fields. This is useful for edit forms where you load existing data.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

formState Properties

formState exposes useful booleans: `isSubmitting` (true while handleSubmit runs), `isDirty` (true if any field changed), `isValid` (true if no errors), and the `errors` object.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Resetting the Form

Call `reset()` to clear all fields and reset formState. Optionally pass new default values.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Performance Advantage

Because RHF uses uncontrolled inputs, the form does not re-render on every keystroke — unlike controlled React forms. Only validation errors and submission state cause re-renders, making large forms snappy.

Quick Check

What does calling handleSubmit(onSubmit) do when the user submits the form?

Recap

Install RHF, call useForm to get register and handleSubmit, spread register() on inputs, and wrap your submit handler with handleSubmit. Set defaultValues for edit forms and call reset() after successful submission.

Up Next

Next lesson: **Validation Rules & Error Messages** — you will apply built-in validation rules and display error messages to users.

Frequently asked questions

Is the “Getting Started with React Hook Form” lesson free?

Yes — the full text of “Getting Started with React Hook Form” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Getting Started with React Hook Form”?

Install RHF, call useForm, register inputs, and handle form submission. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Getting Started with React Hook Form” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy