Components & JSX
Controlled vs uncontrolled forms
Controlled inputs, refs, and performance for large forms.
In a controlled input, React state is the source of truth: value is bound and onChange updates it, so you can validate, mask or transform every keystroke.
A controlled input is a marionette whose every move you script; an uncontrolled input performs on its own and you check the result at curtain call.
Key concepts
1
Uncontrolled inputs keep their own DOM state, read on demand via a ref or on submit — less code and fewer re-renders, ideal for simple or third-party-heavy forms.
Uncontrolledref
2
Performance: controlling every field re-renders the form on each keystroke; large forms often use uncontrolled inputs plus a library (React Hook Form) that subscribes fields individually to avoid whole-form renders.
Performance:
3
Pitfall: setting value without onChange makes a read-only input and logs a warning. Interview angle: "when would you choose uncontrolled?" — big forms, file inputs, or integrating non-React widgets.
Pitfall:Interview angle:valueonChange
jsx
// Controlled
const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />
// Uncontrolled — read on submit
const ref = useRef(null);
<form onSubmit={() => console.log(ref.current.value)}>
<input defaultValue="" ref={ref} />
</form>