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 для чтения при отправке.