Управляемые и неуправляемые формы

Управляемое означает, что React — единственный источник истины для значения: value плюс onChange и перерисовка на каждое нажатие. Поле показывает ровно то, что говорит состояние; ввод вызывает onChange, ты обновляешь состояние, React перерисовывает, поле показывает новое значение. Этот цикл туда-обратно — и есть смысл: поскольку состояние отражает поле на каждой клавише, ты можешь реагировать на значение пока пользователь печатает — валидировать его, преобразовывать, двигать им другой UI.

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>}
    </>
  );
}

Цена явная: каждое нажатие — это обновление состояния и рендер. Для одного поля это ничто. Для формы из 20 полей, где всё состояние сидит в одном компоненте, каждая клавиша перерисовывает все 20.

Неуправляемое означает, что значением владеет DOM — ты его не отслеживаешь, а читаешь один раз при отправке. Никакого value, никакого onChange, никакого состояния, никакого рендера на каждое нажатие. Браузер делает то, что браузеры делали всегда: держит текст в поле. Начальное значение задаёшь через defaultValue (не value), а финальное забираешь, когда оно нужно — при отправке.

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" />;
}

Ввод здесь вызывает ноль рендеров React — компонент рендерится один раз и остаётся на месте, пока пользователь заполняет всю форму. Это более экономный вариант по умолчанию, и для большинства форм он же и меньше кода: ни состояния, ни обработчика на поле.

Для форм только с отправкой пропусти и реф — прочитай все поля сразу через FormData. ref на каждое поле нормален для одного-двух полей, но это всё ещё бойлерплейт, растущий линейно. Браузер уже собирает за тебя каждое именованное поле. Дай каждому полю name, повесь один onSubmit на <form> и собери FormData из элемента формы. Один обработчик, любое число полей, никакой обвязки на каждое поле.

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>
  );
}

Десять полей стоят столько же, сколько два: ни лишнего состояния, ни лишних рефов, ни лишних рендеров. Это паттерн, к которому простая форма должна тянуться первым.

React 19 делает неуправляемый вариант по умолчанию полноправным: action формы получает FormData напрямую. Вместо onSubmit + preventDefault + ручного new FormData ты передаёшь функцию в проп action формы, и React вызывает её с заполненным FormData. Соедини это с useActionState — и получишь состояние ожидания и возвращённый результат, не управляя ни единым полем: фреймворк построен вокруг формы «неуправляемое-плюс-FormData», а не управляемой.

"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>
  );
}

Заметь: ни одно из этих полей не управляемо. Нужное значение приходит в formData ровно в тот момент, когда оно тебе нужно.