Controlled vs uncontrolled components

A controlled input's value is driven by React state; every change flows through an `onChange` handler. An uncontrolled input keeps its value in the DOM, read via refs or on submit. Controlled inputs enable live validation, masking, and dependent fields.

Mixing patterns on one field — setting `value` without handling `onChange` — creates read-only warnings. File inputs are often uncontrolled. Choose controlled when React must own the truth during typing; choose uncontrolled for simple submit-only forms or library integration.

					<input value={name} onChange={(e) => setName(e.target.value)} />
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• One source of truth per field.
• Controlled for interactive validation.
• Ref or FormData for submit-time reads.