Что такое управляемый компонент в React?

Управляемый (controlled) компонент — элемент формы, значение которого хранится в state React: единственный источник правды — состояние, а не DOM.

Как выглядит

const NameForm = () => {
  const [name, setName] = useState('');

  return (
    <input
      value={name}                              // значение ИЗ state
      onChange={(e) => setName(e.target.value)} // изменение ЧЕРЕЗ state
    />
  );
};

Цикл: пользователь печатает → onChange → setState → перерендер → input показывает значение из state. DOM не хранит собственного состояния — что в state, то и на экране.

Что это даёт

• Мгновенная валидация и трансформация: привести к верхнему регистру, отфильтровать символы, ограничить длину — прямо в onChange.
• Условная логика: кнопка «Отправить» активна только при валидном значении — оно всегда под рукой.
• Синхронизация: одно значение в нескольких местах UI (поле + предпросмотр).
• Программный сброс/установка: setName('') очищает поле.

Противоположность: неуправляемый компонент

Значение живёт в DOM, React читает его по необходимости через ref (inputRef.current.value), начальное значение — defaultValue. Меньше кода и перерендеров, но нет живой валидации.

Нюансы

• value без onChange делает поле read-only (React предупредит).
• Управляемый инпут перерендеривает компонент на каждый символ — для больших форм это повод для библиотек (React Hook Form использует неуправляемый подход под капотом).
• value={undefined} переключает инпут в неуправляемый режим — источник багов при «иногда undefined» значениях.

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

Управляемый компонент — форма, где значение хранится в state и меняется только через onChange → setState; DOM не имеет собственного состояния. Даёт живую валидацию и полный контроль ценой перерендера на каждый ввод. Альтернатива — неуправляемый компонент с ref/defaultValue.