React Forms, Two Ways: Controlled vs. Uncontrolled

In React, form inputs (like text boxes, checkboxes, selects) can be managed in two ways:

• Controlled Components → React fully controls the input state.
• Uncontrolled Components → The DOM manages state, and React accesses it only when needed.

👉 Think of it like driving:

• Controlled = manual driving (you control every move).
• Uncontrolled = cruise control (browser manages, you just check status).

Basics & Need

• Use Controlled Components when you need React to validate, format, or manipulate input live (e.g., forms with validation, filtering search).
• Use Uncontrolled Components when you just need the final value at submission (e.g., a simple “Contact Us” form).

How to Achieve It

Controlled Example

const ControlledInput = () => {
const [value, setValue] = React.useState("");

return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
};

👉 value is tied to React state.
👉 Every keystroke updates React.

Uncontrolled Example

const UncontrolledInput = () => {
const inputRef = React.useRef();

const handleSubmit = () => {
alert(`Value: ${inputRef.current.value}`);
};

return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>Submit</button>
</>
);
};

👉 React only reads value when needed.
👉 DOM keeps the state internally.

Best Practices

• Prefer controlled inputs for complex forms, live validation, and user experience.
• Use uncontrolled inputs for simple, performance-friendly forms.
• Mix wisely: sometimes a form may have both types.
• Always handle edge cases (empty values, defaults, resetting).

Real-World Examples

1. Search bar (Controlled) → Immediate updates for filtering/search suggestions.
2. Login form (Controlled) → Real-time validation for username/password.
3. Newsletter signup (Uncontrolled) → Just need the email on submit.

Advantages

Controlled

✅ Predictable, React-driven state
✅ Easy validation & formatting
✅ Single source of truth

Uncontrolled

✅ Less boilerplate
✅ Faster for large forms (no re-renders per keystroke)
✅ Closer to native HTML forms

Disadvantages

Controlled

❌ More code & boilerplate
❌ Can be less performant with huge forms

Uncontrolled

❌ Harder to validate live
❌ Less predictable (DOM is source of truth)

Common Problems / Pitfalls

• Forgetting to initialize controlled values (value="") → React warns about switching between controlled/uncontrolled.
• Over-controlling everything → unnecessary re-renders.
• Not cleaning refs in uncontrolled components → stale values.

Summary Recommendation

Use Controlled Components when you need React to manage, validate, or transform inputs live. They give you predictable state but come with extra boilerplate. Use Uncontrolled Components when you just need raw values at the end, keeping things lightweight. For most apps, start with controlled unless performance becomes a concern.