foundation
Controlled vs uncontrolled components
Выбирайте, кто владеет значениями input — React state или DOM — а также момент валидации и поведение сброса.
Controlled-поле: value задаётся state React, каждое изменение идёт через `onChange`. Uncontrolled хранит value в DOM, читается через ref или при submit. Controlled удобны для живой валидации, масок и зависимых полей.
Смешение паттернов на одном поле — `value` без `onChange` — даёт предупреждение о read-only. File input часто uncontrolled. Выбирайте controlled, когда React должен владеть истиной во время набора; uncontrolled — для простых форм «только submit» или интеграции с библиотеками.
<input value={name} onChange={(e) => setName(e.target.value)} />
На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.
Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.
Компромисс часто между ясностью и переиспользованием или между явными props и удобством.
Чеклист:
- Один источник истины на поле.
- Controlled для интерактивной валидации.
- Ref или FormData для чтения при отправке.