PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Что такое неуправляемый компонент в 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.

Другие вопросы раздела