Что такое controlled components?

Короткий ответ

Controlled component — элемент формы, чьё значение полностью контролируется React state (или props сверху). Источник правды — JavaScript-состояние, а не «скрытое» значение в DOM.

function NameForm() {
  const [name, setName] = useState('');
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        console.log(name);
      }}
    >
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit" disabled={!name.trim()}>
        Отправить
      </button>
    </form>
  );
}

Плюсы controlled-подхода:

• валидация и маски на лету;
• связанные поля (страна → список городов) легко синхронизировать;
• значение всегда доступно в обработчиках без чтения из DOM;
• UI предсказуем: один state → один вид поля.

Минусы: чуть больше кода; каждый ввод = setState + рендер (для типичных форм это дёшево). Если случайно задать value без onChange, поле станет «заблокированным» — частый баг новичков.

На практике большинство полей в React-приложениях делают controlled, особенно при сложной UX-валидации. Библиотеки форм (React Hook Form и др.) могут смешивать подходы ради производительности.

Итог

Controlled: value + onChange из state; React владеет значением поля формы.