Controlled vs uncontrolled forms

Controlled means React is the single source of truth for the value — value plus onChange, and a re-render per keystroke. The input shows exactly what state says; typing fires onChange, you update state, React re-renders, the input shows the new value. That round-trip is the point: because state mirrors the field on every key, you can react to the value while the user types — validate it, transform it, drive other UI from it.

function ControlledEmail() {
  const [email, setEmail] = useState("");
  const invalid = email.length > 0 && !email.includes("@");
  return (
    <>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      {invalid && <p role="alert">Email needs an @</p>}
    </>
  );
}

The cost is explicit: every keystroke is a state update and a render. For one field that’s nothing. For a 20-field form where all the state sits in one component, every key re-renders all 20.

Uncontrolled means the DOM owns the value — you don’t track it, you read it once on submit. No value, no onChange, no state, no per-keystroke render. The browser does what browsers have always done: hold the text in the field. You set the initial value with defaultValue (not value), and you retrieve the final value when it matters — at submit.

function UncontrolledEmail() {
  const ref = useRef<HTMLInputElement>(null);
  function submit() {
    console.log(ref.current?.value); // read once, on demand
  }
  return <input ref={ref} defaultValue="" name="email" />;
}

Typing here causes zero React renders — the component renders once and stays put while the user fills the whole form. That is the leaner default, and for most forms it’s also less code: no state, no handler per field.

For submit-only forms, skip the ref too — read every field at once with FormData. A ref per input is fine for one or two fields, but it’s still boilerplate that scales linearly. The browser already collects every named field for you. Give each input a name, attach one onSubmit to the <form>, and construct FormData from the form element. One handler, any number of fields, no per-field wiring.

function SignupForm() {
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const email = data.get("email");      // typed values, read once
    const password = data.get("password");
    // ...send to the server
  }
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" defaultValue="" />
      <input name="password" type="password" />
      <button>Sign up</button>
    </form>
  );
}

Ten fields cost the same as two: no extra state, no extra refs, no extra renders. This is the pattern a plain form should reach for first.

React 19 makes the uncontrolled default first-class: a form action receives FormData directly. Instead of onSubmit + preventDefault + manual new FormData, you pass a function to the form’s action prop and React calls it with the populated FormData. Pair it with useActionState and you get pending state and a returned result without controlling a single input — the framework is built around the uncontrolled-plus-FormData shape, not the controlled one.

"use client";
import { useActionState } from "react";

async function signup(_prev: string | null, formData: FormData) {
  const email = formData.get("email");
  // call the server, return an error string or null
  return email ? null : "Email is required";
}

function SignupForm() {
  const [error, action, pending] = useActionState(signup, null);
  return (
    <form action={action}>
      <input name="email" type="email" />
      <button disabled={pending}>{pending ? "..." : "Sign up"}</button>
      {error && <p role="alert">{error}</p>}
    </form>
  );
}

Notice none of these inputs are controlled. The value you need arrives in formData at exactly the moment you need it.