Контролируемые и неконтролируемые поля
Вопрос
Чем контролируемое поле отличается от неконтролируемого и что выбрать?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
контролируемое: значение в состоянии React, есть value и onChange
неконтролируемое: значение живёт в DOM, читается через ref
контролируемое даёт валидацию на лету и производные состояния
цена: рендер на каждое нажатие клавиши
неконтролируемое дешевле и проще для больших форм
библиотеки форм используют неконтролируемый подход с подпиской
Что могут спросить следом
- Почему React ругается на смену value с undefined на строку
- Как сделать маску телефона без потери позиции курсора
- Когда форма на состоянии становится тормозной
Разбор
Контролируемое поле хранит значение в состоянии React: value + onChange.
Это даёт валидацию по ходу ввода, маски, зависимые поля - но перерисовывает компонент
на каждое нажатие.
Неконтролируемое держит значение в DOM, читается через ref или при отправке формы.
Дешевле, ближе к платформе, но состояние вне React.
Большие формы поэтому и делают на react-hook-form: он использует неконтролируемый подход и подписывает на изменения только те поля, которым это нужно. Единственное, чего нельзя - переключать поле между режимами по ходу жизни: React ругается.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.