Контролируемые и неконтролируемые формы
Вопрос
Объясни разницу между контролируемыми и неконтролируемыми полями. Что ты выберешь для большой формы?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Контролируемое: значение в состоянии, `value` + `onChange`, рендер на каждый символ
Неконтролируемое: значение в DOM, `defaultValue`, чтение через FormData или ref
Контролируемое удобно для форматирования, зависимых полей, блокировки кнопки
Неконтролируемое проще и быстрее, file input всегда такой
Для большой формы React Hook Form на неконтролируемых полях со схемой Zod
В React 19 простые формы можно делать на `action` и `useActionState` без состояния полей
Что могут спросить следом
- Что будет, если передать
valueбезonChange? - Как сбросить контролируемую форму после отправки?
- Почему ввод в контролируемое поле может тормозить и как это исправить?
Разбор
Контролируемое поле получает значение из состояния React и сообщает об изменениях через onChange. Источник правды один, состояние: можно форматировать телефон на лету, показывать ошибку при вводе, блокировать кнопку. Цена: каждый символ вызывает рендер компонента, где лежит состояние.
Неконтролируемое поле хранит значение в DOM. Я задаю defaultValue и читаю данные при отправке через FormData. Кода меньше, рендеров нет. Поле выбора файла вообще может быть только неконтролируемым.
Для большой формы я беру React Hook Form: он регистрирует неконтролируемые поля через ref, поэтому ввод не перерисовывает всю форму, а валидацию описываю схемой Zod. Для простых форм в React 19 часто хватает <form action> с useActionState: React сам соберёт FormData, покажет ожидание через isPending и сбросит поля после успеха.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.