Вопрос с собеседования · Frontend

Чем контролируемый компонент формы отличается от неконтролируемого?

JuniorReact
Коротко

Контролируемый — значение поля хранится в состоянии React (value + onChange): React — единственный источник истины, легко валидировать и форматировать на лету. Неконтролируемый — значение хранит сам DOM, читают через ref или FormData при отправке (defaultValue).

  • Контролируемый: мгновенная валидация, зависимые поля, маски ввода
  • Неконтролируемый: меньше рендеров, проще для больших форм, file input всегда такой
  • value без onChange — поле «замёрзнет» (предупреждение в консоли)

А ещё react-hook-form построен на неконтролируемых полях ради производительности

Подробно

Контролируемые поля перерисовывают компонент на каждое нажатие. На небольших формах это незаметно и даёт полный контроль: блокировать кнопку, показывать ошибки при вводе, приводить к верхнему регистру.

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

Переключать поле между режимами нельзя: value={undefined}, а затем строка — предупреждение React; начальное значение задавать "".

Пример

// контролируемый
const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />

// неконтролируемый
function Form() {
  const onSubmit = e => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.currentTarget));
    send(data);
  };
  return <form onSubmit={onSubmit}><input name="email" defaultValue="" /></form>;
}

Что хотят услышать

  • Где хранится значение.
  • Плюсы и минусы каждого подхода.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Контролируемый — значение в состоянии React (value + onChange); неконтролируемый — в DOM
  • ✗Контролируемый — значение хранит DOM и читается через ref; неконтролируемый — в состоянии
  • ✗Неконтролируемый компонент нельзя отправить в форме, его значение недоступно
  • ✗defaultValue делает поле контролируемым, а value — неконтролируемым

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования