Неконтролируемые компоненты

Неконтролируемые компоненты — это элементы формы, значение которых управляется самим DOM, а не состоянием React. Вместо того чтобы синхронизировать каждое изменение с useState, вы позволяете браузеру хранить данные и читаете их только тогда, когда они нужны — например, при отправке формы.

Как это работает

Для создания неконтролируемого компонента:

Используйте useRef, чтобы получить ссылку на DOM-элемент
Пропустите привязку value к состоянию
При необходимости прочитайте значение через ref.current.value

Пример:

function UncontrolledInput() {
  const inputRef = useRef(null);

  function handleClick() {
    console.log('Текущее значение:', inputRef.current.value);
  }

  return (
    <>
      <input ref={inputRef} defaultValue="начальное значение" />
      <button onClick={handleClick}>Показать значение</button>
    </>
  );
}

Обратите внимание: вместо value используется defaultValue. Это задаёт начальное значение, но не блокирует дальнейший ввод пользователя.

Когда использовать

Неконтролируемые компоненты уместны в следующих случаях:

Большие формы, где управление каждым полем через состояние создаёт избыточную нагрузку
Интеграция со сторонними библиотеками, которые напрямую работают с DOM (например, редакторы кода или карты)
Одноразовый ввод, например, поиск или быстрая отправка данных без валидации
Производительность: если поле обновляется очень часто (например, рисование или аудиовизуализация)

Особенности

Нет автоматической синхронизации с состоянием — вы сами решаете, когда читать данные
Невозможно динамически изменить значение поля из кода (кроме как через ref.current.value = ..., что не рекомендуется)
Валидация возможна только в момент чтения (например, при отправке), а не в реальном времени

Сравнение с контролируемыми

Критерий	Контролируемые	Неконтролируемые
Управление значением	Через `useState`	Через DOM
Обновление UI	Автоматическое	Только при чтении
Валидация	В реальном времени	При отправке/чтении
Код	Больше	Меньше
Производительность	Может быть ниже	Выше для больших форм

Неконтролируемые компоненты — допустимый, но менее распространённый подход. Используйте их осознанно, когда преимущества перевешивают потерю реактивности.