Что такое неуправляемый компонент в React?
Компоненты
Неуправляемый компонент — поле формы, значение которого живёт в DOM, а не в state React. То же, что «неконтролируемый» (uncontrolled) — встречаются оба перевода.
Схема
const Feedback = () => {
const messageRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
send(messageRef.current.value); // читаем из DOM в момент отправки
};
return (
<form onSubmit={handleSubmit}>
<textarea ref={messageRef} defaultValue="" />
<button>Отправить</button>
</form>
);
};Признаки: defaultValue/defaultChecked вместо value/checked, чтение через ref или FormData, отсутствие onChange-цикла через state.
Сильные стороны
- Ноль перерендеров при вводе — браузер сам ведёт значение; большие формы заметно легче.
- Меньше кода для сценария «заполнил → отправил».
- Дружит с нативными возможностями: автозаполнение, встроенная HTML-валидация (required, pattern).
<input type="file" />бывает только неуправляемым — значение файла нельзя задать программно.
Слабые стороны
- Нет живой валидации/масок/зависимых полей «из коробки» — только вручную по событиям.
- Значение не изменить декларативно; сброс —
form.reset()или запись в ref. - Труднее синхронизировать UI с текущим значением (счётчики символов и т.п.).
Практика
React Hook Form регистрирует поля через ref (неуправляемо) и подписывается точечно — за счёт этого быстрый. Чистые неуправляемые поля хороши в простых формах; как только нужна живая логика — управляемые или RHF.
Коротко для собеседования
Неуправляемый компонент хранит значение в DOM: defaultValue + ref (или FormData), React читает по необходимости. Плюсы — нет рендеров на ввод, меньше кода, нативная валидация; минусы — нет живого контроля значения. File input всегда такой; на этом подходе построен React Hook Form.