Как сделать uncontrolled input и когда это оправдано?

Неконтролируемые инпуты в библиотеке React представляют собой альтернативный подход к работе с формами, при котором значения полей хранятся не в реактивном состоянии компонента, а внутри самого DOM-дерева браузера. Такой подход во многом напоминает классическую веб-разработку, где данные извлекаются из элементов формы только в момент отправки. Для реализации этого паттерна вместо свойства value используется атрибут defaultValue, который задает лишь начальное значение поля, после чего элемент живет своей собственной жизнью независимо от реактивных циклов.

Для чтения введенных пользователем данных в неконтролируемых компонентах применяются ссылки, создаваемые с помощью хука useRef, которые привязываются непосредственно к элементам ввода. В момент отправки формы обработчик события вызывает сохраненное значение через свойство current.value целевого элемента. Такой подход оказывается особенно оправданным в следующих сценариях:

Важно отметить, что валидация в неконтролируемых формах обычно переносится на момент отправки данных или на событие потери фокуса полем, а не выполняется при каждом нажатии клавиши. Популярные библиотеки управления формами, такие как React Hook Form, активно используют именно неконтролируемый подход под капотом через ссылки, что позволяет им достигать феноменальной производительности и минимального потребления памяти.