Uncontrolled компоненты
Тема дорожной карты · React
Неконтролируемые компоненты — это React-элементы форм, управляющие собственным состоянием внутри DOM, а не через состояние React; доступ к ним осуществляется императивно с помощью ref useRef, прикреплённого к элементу, вместо привязок onChange / value. Хук useRef возвращает мутируемый объект ref, свойство .current которого указывает непосредственно на базовый DOM-узел, что позволяет читать значение поля по требованию (например, при отправке формы) без запуска перерендеров React при каждом нажатии клавиши. Неконтролируемые компоненты проще в реализации для базовых форм, где валидация в реальном времени или производное состояние не требуются, и они естественно интегрируются со сторонними не-React-библиотеками, непосредственно манипулирующими DOM. Пропсы defaultValue и defaultChecked (а не value и checked) используются для задания начального значения неконтролируемых React-полей без превращения их в контролируемые компоненты. В TypeScript React-проектах useRef<HTMLInputElement>(null) создаёт корректно типизированный ref, а доступ к inputRef.current?.value безопасно обрабатывает случай, когда ref ещё не прикреплён при начальном рендеринге.
Как это работает
Uncontrolled компоненты использует camelCase event props (onClick, onChange, onSubmit), получающие SyntheticEvent — кроссбраузерную обёртку React над нативным событием. Для форм: "controlled"-компоненты держат значение input в state и ререндерятся на change; "uncontrolled" читают значение через ref при необходимости. useRef возвращает мутируемый контейнер (.current), переживающий рендеры без триггера ререндера — полезно для DOM-узлов и uncontrolled-инпутов.
Когда применять
Controlled-формы — когда (а) нужна валидация по мере ввода, (б) UI зависит от form state (live preview, условные поля), (в) сабмит через fetch с полным контролем. Uncontrolled — когда форма большая + простая (DOM хранит значения, читаете через FormData на сабмит). Для нетривиальных форм — react-hook-form: избегает ререндера на каждое нажатие в полностью controlled-формах.
Типичные ошибки
Ловушки Uncontrolled компоненты: забытый preventDefault() на сабмите формы — браузер перезагружается; бинд событий на элементах, которые их не генерируют (onClick на <div> без keyboard support = недоступно); хранение каждого нажатия в state на 50-полевой форме (rerender-шторм); использование ref.current внутри render (refs не реактивны — изменения не триггерят ререндер). useRef — escape hatch, не обычный state.