React Controlled vs Uncontrolled Components — Complete Interview Guide

Controlled Components — React Owns the Value

A controlled input has two required pieces: a value prop tied to React state, and an onChange handler that updates that state. Every keystroke the user makes flows through the handler, updates state, triggers a re-render, and the input displays the new state value. The DOM never independently holds the current value — React state is always the source of truth.

function ControlledSearch() {
  const [query, setQuery] = useState('');

  return (
    <input
      type="text"
      value={query}                         // React state drives the displayed value
      onChange={e => setQuery(e.target.value)} // every keystroke updates state
    />
  );
}

Because React state is always current, you can read query at any moment without touching the DOM. This makes instant validation, character counters, conditional UI, and programmatic resets straightforward.

Uncontrolled Components — The DOM Owns the Value

An uncontrolled input manages its own value inside the DOM — React doesn't know the current value unless it explicitly reads it via a ref. You set the starting value with defaultValue (not value), and the DOM takes over from there.

function UncontrolledForm() {
  const nameRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    console.log(nameRef.current.value); // read on demand
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        ref={nameRef}
        defaultValue="Alice"  // sets initial DOM value; DOM controls it after that
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Uncontrolled inputs don't re-render on every keystroke because React is completely unaware of the changes. This makes them significantly faster for large forms with many fields.

The Critical Rule: Never Switch Between the Two

React tracks whether an input is controlled (has a value prop) or uncontrolled (no value prop) from the first render. Switching between them — by passing undefined as the value — causes a React warning and unpredictable behaviour:

// ❌ Bug: undefined on first render (uncontrolled), string later (controlled)
<input value={user?.name} />

// ✅ Fix: always provide a string — controlled from the first render onwards
<input value={user?.name ?? ''} />

If value can ever be undefined or null, always provide a fallback empty string. This is the most common controlled-component bug in real codebases.

textarea and select — Same Pattern, Different Look

React normalises <textarea> and <select> to follow the same controlled/uncontrolled API as <input>:

// Controlled textarea
<textarea value={bio} onChange={e => setBio(e.target.value)} />

// Controlled select — value on the <select>, not on <option>
<select value={country} onChange={e => setCountry(e.target.value)}>
  <option value="in">India</option>
  <option value="us">USA</option>
</select>

File Inputs — Always Uncontrolled

File inputs are always uncontrolled — this is a browser security restriction, not a React limitation. The browser will never allow JavaScript to programmatically set a file input's value. Read the selected file through a ref or the event object:

// ❌ React will warn — file inputs cannot have a value prop
<input type="file" value={file} />

// ✅ Always read via ref or event
const fileRef = useRef(null);

function handleUpload() {
  const file = fileRef.current.files[0];
  upload(file);
}

<input type="file" ref={fileRef} />

When to Use Each

Use controlled when you need:

• Instant validation or feedback as the user types
• Conditional UI that depends on the current input value (character counter, submit button state)
• Programmatically setting, clearing, or resetting the value
• Syncing the input value with another part of the UI

Use uncontrolled when:

• You have a large form (50+ fields) and keystroke re-renders are a measurable bottleneck
• You only need the values at submit time, not during typing
• Integrating with non-React code or third-party libraries that manage their own input state

How Form Libraries Choose

React Hook Form is built on uncontrolled inputs — fields register via refs, values are read on submit, and only fields with errors re-render. This makes it extremely fast for large forms. Formik uses controlled inputs — every field value lives in Formik's state, enabling per-field validation and easy cross-field logic at the cost of per-keystroke re-renders.