Что такое контролируемый компонент?

Контролируемый компонент — элемент формы, значением которого управляет React: значение хранится в state и меняется только через onChange.

Схема

const Subscribe = () => {
  const [email, setEmail] = useState('');

  return (
    <input
      type="email"
      value={email}                                // из state
      onChange={(e) => setEmail(e.target.value)}   // в state
    />
  );
};

Поток: нажатие клавиши → onChange → setEmail → перерендер → input показывает state. Что в state — то и в поле; DOM своего состояния не имеет.

Зачем контролировать значение

• Живая валидация: проверка и подсветка ошибок на каждый ввод.
• Форматирование на лету: маска телефона, верхний регистр, обрезка пробелов.
• Зависимая логика: активность кнопки, подсказки, счётчик символов — значение всегда доступно в state.
• Программное управление: очистить (setEmail('')), подставить значение, синхронизировать с другим полем.

Плата

Перерендер компонента на каждый символ. Для пары полей — незаметно; для форм на десятки полей стоит держать state ближе к полю, дебаунсить дорогие реакции или взять React Hook Form (неуправляемые поля внутри).

Типичные ошибки

• value без onChange — поле «замерзает» (read-only) + предупреждение React.
• value={undefined} — поле неожиданно становится неуправляемым; всегда давать строку: value={text ?? ''}.

Коротко для собеседования

Контролируемый компонент: значение поля в state, изменение через onChange, DOM без собственного состояния. Даёт живую валидацию, маски и полный программный контроль ценой рендера на каждый ввод. Ошибки-классика: value без onChange и value={undefined}.