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

Неконтролируемый (uncontrolled) компонент — элемент формы, значение которого хранится в самом DOM, а не в state React. React лишь читает его при необходимости.

Как выглядит

const Form = () => {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    api.save({ name: nameRef.current.value }); // читаем из DOM в момент сабмита
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="Гость" />
      <button>Сохранить</button>
    </form>
  );
};

Признаки: defaultValue (не value) для начального значения и ref для чтения. Пока пользователь печатает, React не участвует: нет ни onChange, ни перерендеров.

Плюсы

• Нет перерендера на каждый символ — большие формы работают быстрее.
• Меньше кода для простых случаев «прочитать при отправке».
• Естественная интеграция с не-React кодом и нативным поведением браузера (автозаполнение).
• <input type="file" /> — всегда неуправляемый: значение файла программно задать нельзя.

Минусы

• Нет живой валидации/форматирования по мере ввода (только по событиям вручную).
• Значение нельзя изменить декларативно из state; сброс — императивно (form.reset()).
• Сложнее синхронизировать несколько частей UI с текущим значением.

Контекст

React Hook Form построен именно на неуправляемых полях (регистрация через ref) — отсюда его производительность. Управляемый аналог — value + onChange + useState.

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

Неконтролируемый компонент хранит значение в DOM: defaultValue для начального значения, чтение через ref в нужный момент. Быстрее (нет рендера на каждый ввод) и проще, но без живой валидации и декларативного управления. На этом подходе построен React Hook Form; file input неуправляем всегда.