Controlled и uncontrolled инпуты: кто владеет значением и сколько это стоит

Два владельца, один инпут

У каждого поля формы ровно один источник истины, и React заставляет выбрать, какой именно. В controlled-инпуте значением владеет state React: проп value прибивает то, что показывает DOM, а onChange — единственная дверь, через которую нажатие клавиши становится видимым: событие срабатывает, вы вызываете setState, React ререндерит, и новое значение стекает обратно в DOM. DOM-инпут низведён до тупого дисплея вашего состояния. В uncontrolled-инпуте значением владеет DOM — ровно как на обычной HTML-странице: браузер сам отслеживает ввод, React не слышит отдельных нажатий, а результат вы читаете тогда, когда он нужен — через ref или весь разом через new FormData(form) в обработчике submit. defaultValue (не value) задаёт начальный текст, не претендуя на владение.

Различие не стилистическое; оно решает, когда выполняется ваш код. Controlled означает ререндер компонента на каждый символ — это входной билет. Uncontrolled означает один рендер, а ваш код выполняется в момент submit.

function CouponControlled() {
  const [code, setCode] = useState("");
  // Ре-рендер на каждое нажатие; можно валидировать, трансформировать, блокировать вживую.
  return (
    <input
      value={code}
      onChange={(e) => setCode(e.target.value.toUpperCase())}
    />
  );
}

function CheckoutUncontrolled() {
  // Рендерится один раз; DOM хранит значения до момента submit.
  function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    submitOrder(data.get("coupon"), data.get("email"));
  }
  return (
    <form onSubmit={handleSubmit}>
      <input name="coupon" defaultValue="" />
      <input name="email" type="email" />
      <button>Pay</button>
    </form>
  );
}

Что controlled покупает и какой счёт выставляет

Выбирайте controlled, когда UI должен реагировать на значение по мере ввода: живые сообщения валидации, счётчик символов, форматирование на лету (номер карты группами по четыре), фильтрация списка на каждый символ, активация кнопки submit только при валидной форме, синхронизация двух виджетов одним значением. Ничего из этого невозможно, если React узнаёт значение только на submit.

Счёт приходит в виде работы рендера. Один controlled-инпут, ререндерящий собственный маленький компонент, — ничто: рендер — это вызов функции, производящий элементы, сильно меньше миллисекунды. Провальный режим структурный: команды поднимают состояние всех полей в один объект на вершине формы из 60 полей, и каждый символ в любом поле ререндерит всё дерево формы. При 5–15 мс на полный рендер формы это ещё влезает в кадр; добавьте пару дорогих дочерних компонентов — и вы на 40–80 мс на символ, и набор текста заметно заикается, потому что каждое нажатие теперь запускает работу размером с layout. Лечение тоже структурное: держите состояние поля в наименьшем компоненте, которому оно нужно, мемоизируйте тяжёлых соседей или перестаньте контролировать поля, которые никто не читает до submit.

Выбирайте uncontrolled, когда форма «сабмитной» формы: ничто не зависит от промежуточных значений, нужна минимальная цена ререндеров, вы интегрируете не-React-виджет, который сам мутирует DOM, или работаете с файлами — <input type="file" /> всегда uncontrolled, потому что его значение может установить только пользователь, никогда код.

Полуконтролируемый инпут: как режимы портят друг друга

Почти все баги форм в этой области — два сценария. Первый: value без onChange. Инпут становится контролируемым константой. Пользователь печатает, DOM на мгновение показывает символ, React ререндерит (или просто сбрасывает узел) обратно к прибитому значению — поле съедает нажатия. React один раз предупреждает в консоли и предлагает легальные выходы: добавить onChange, поставить readOnly, если поле действительно только для чтения, или использовать defaultValue, если вы хотели лишь задать начальное значение.

Второй: смена режима в течение жизни компонента. Инпут монтируется uncontrolled (value равен undefined — например, данные профиля ещё не загрузились), а позже получает строку, когда fetch разрешился. React пишет: A component is changing an uncontrolled input to be controlled. Опасность не в тексте предупреждения, а в том, что всё набранное пользователем за uncontrolled-окно молча уничтожается, когда проп value забирает владение. Обратное переключение (controlled → uncontrolled, value становится undefined) бросает поле с замороженным последним значением. Правило: инпут controlled или uncontrolled на всю свою жизнь. Если начальное состояние может отсутствовать — инициализируйте "", никогда undefined, или не рендерите инпут, пока данных нет.