В чём разница между controlled и uncontrolled компонентами в React?

Controlled и uncontrolled компоненты

• Управление состоянием: в controlled-компонентах React хранит его через props и setState, а в uncontrolled-компонентах состояние остаётся внутри DOM
• Источник данных: controlled-компоненты делают React основным владельцем значения, тогда как uncontrolled-компоненты передают эту роль DOM
• Обработка событий: controlled-компонент меняет state при каждом вводе, а uncontrolled-компонент обращается к актуальному значению через рефы
• Валидация: controlled-подход упрощает проверку данных и их синхронизацию с UI
• Когда применять: controlled-компоненты подходят для сложных форм, связанных с состоянием, а uncontrolled — для простых сценариев с минимумом логики
• Производительность: uncontrolled-подход иногда работает немного быстрее, поскольку вызывает меньше повторных рендеров
• Итог: при controlled-подходе вводом управляет React, а при uncontrolled управление непосредственно остаётся у DOM-элемента

Понимание этой разницы показывает, что разработчик владеет архитектурой React-форм и умеет выбирать баланс между контролем и простотой.

Подробный ответ

Основной ответ

Controlled и uncontrolled компоненты представляют два способа управлять состоянием формы в React. Controlled компонент целиком опирается на React state и props, а состояние uncontrolled компонента сохраняется в DOM-элементе, поэтому React не управляет его значением напрямую.

Ключевые моменты

• Для controlled компонента текущее значение всегда передаётся через проп value, а изменение состояния выполняется обработчиком onChange. Такой подход обеспечивает полный контроль над вводом, облегчает валидацию и синхронизацию данных, а также делает поведение более предсказуемым.
• Uncontrolled компонент хранит своё состояние в DOM, например используя ref и обращаясь к input.value. Реализовать его проще и в коде меньше "воды", однако подключать такой компонент к сложной логике взаимодействия и валидации труднее.
• Начиная с React 16+ controlled-компоненты считаются best practice для форм со сложной логикой или динамической валидацией. При этом uncontrolled-подход остаётся подходящим выбором для простых форм, которым не требуется сложный контроль.

Практический контекст

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