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

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

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

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

Создайте состояние с помощью useState
Привяжите значение поля к этому состоянию через value
Обновляйте состояние при каждом изменении через onChange

Пример текстового поля:

function NameInput() {
  const [name, setName] = useState('');

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Введите имя"
    />
  );
}

Без value поле будет неконтролируемым. Без onChange оно станет «только для чтения» — пользователь не сможет его изменить.

Поддерживаемые элементы

Контролируемые компоненты работают со всеми стандартными элементами формы:

<input type="text">, <input type="password"> и т.д. — через value
<textarea> — также через value
<select> — через value (может быть строкой или массивом для множественного выбора)
<input type="checkbox"> и <input type="radio"> — через checked

Пример выпадающего списка:

function CitySelect() {
  const [city, setCity] = useState('moscow');

  return (
    <select value={city} onChange={(e) => setCity(e.target.value)}>
      <option value="moscow">Москва</option>
      <option value="spb">Санкт-Петербург</option>
    </select>
  );
}

Преимущества

Полный контроль: вы всегда знаете текущее значение
Валидация в реальном времени: можно блокировать недопустимый ввод
Преобразование данных: например, приведение к верхнему регистру или форматирование номера телефона
Синхронизация: значение легко использовать в других частях приложения

Ограничения

Требует больше кода, особенно для больших форм
Может снижать производительность при очень частых обновлениях (в таких случаях можно использовать useDeferredValue или оптимизировать)

Контролируемые компоненты — основной и рекомендуемый способ работы с формами в React, так как они соответствуют декларативной философии фреймворка.