Controlled vs Uncontrolled Components (Forms)

30‑second interview answer

A controlled input stores its value in React state (value + onChange). An uncontrolled input lets the DOM keep the value, and React reads it via a ref when needed. Controlled is more predictable (validation, conditional UI), while uncontrolled can be simpler and faster for basic forms.

Controlled components

Example

function Controlled() {
  const [email, setEmail] = useState('');
 
  return (
    <input
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="you@example.com"
    />
  );
}

Pros

• Single source of truth
• Easy validation
• Easy conditional UI (disable submit, show errors)
• Works well with form libraries

Cons

• More code
• Can cause more renders if the form is large (usually fine)

Uncontrolled components

Example

function Uncontrolled() {
  const ref = useRef(null);
 
  function handleSubmit(e) {
    e.preventDefault();
    const value = ref.current.value;
    console.log(value);
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input ref={ref} defaultValue="" />
      <button>Submit</button>
    </form>
  );
}

Pros

• Less state management
• Good when you only need value on submit

Cons

• Harder to validate continuously
• Harder to keep UI synced with input value

When to use which (practical rules)

Use controlled when:

• you need realtime validation
• you need to conditionally show UI based on input
• you need to enforce formats (masking)
• you use React Hook Form in controlled mode

Use uncontrolled when:

• form is simple
• you only care on submit
• you want minimal React state

Interview-ready line:

“Controlled is default for predictability; uncontrolled is fine for simple forms or when using refs intentionally.”

Common traps interviewers ask

1) Mixing value and defaultValue

• value makes it controlled.
• defaultValue is for uncontrolled initial value.

Don’t do both.

2) Forgetting onChange with value

You’ll get a read-only input.

3) Performance fear

Most forms are fine controlled. If you have huge forms, use libraries (React Hook Form) that optimize or consider uncontrolled inputs.

Mini Q&A

Q1: Controlled vs uncontrolled?

• State-driven vs DOM-driven.

Q2: Which is easier to validate?

• Controlled.

Q3: When is uncontrolled useful?

• Simple forms, read value on submit, performance-optimized form libraries.

Summary checklist

• I can define controlled vs uncontrolled.
• I can code both patterns.
• I know when each is appropriate.
• I avoid mixing value and defaultValue.