Interview answer drill

Use this React interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more React interview questions

What is the difference between controlled and uncontrolled components?Frontend interview answer

HighIntermediateReact

By FrontendAtlas Team · Updated Apr 9, 2026

Interview focus

This React interview question tests whether you can explain Controlled vs uncontrolled React inputs: warnings, defaultValue, and file input rules, connect it to production trade-offs, and handle common follow-up questions.

Controlled vs uncontrolled React inputs: warnings, defaultValue, and file input rules explanation without falling back to memorized docs wording
Forms and State reasoning, edge cases, and production failure modes
How you would answer the most likely React interview follow-up

Practice more React interview questions

Interview quick answer

Compare controlled and uncontrolled React inputs through validation, reset behavior, defaultValue, file-input limits, and the production warning/debugging cases that appear when a field switches ownership.

Full interview answer

Overview

The real distinction is ownership. A controlled input is owned by React state, which makes validation, derived UI, and reset flows predictable. An uncontrolled input is owned by the DOM, which is often simpler for one-off forms, file inputs, and low-friction submissions. The production bugs appear when one field tries to switch owners halfway through its lifecycle.

Type	Best when	Common pitfall
Controlled Component	You need validation, derived UI, masking, live previews, or reliable reset behavior.	Large forms can get verbose, and poor state placement can make keystrokes feel laggy.
Uncontrolled Component	You only need the value on submit, or the browser must own the field (for example file inputs).	It is easier to lose sync with React state or forget `defaultValue`/`defaultChecked`.

Key differences between controlled and uncontrolled components

JSX

// Controlled Component
function ControlledInput() {
  const [value, setValue] = useState('');
  return (
    <input value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

// Uncontrolled Component
function UncontrolledInput() {
  const inputRef = useRef(null);
  const handleSubmit = () => alert(inputRef.current.value);
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Production bug to recognize immediately

The warning A component is changing an uncontrolled input to be controlled usually means the same field started with DOM ownership and later received a React-controlled value. A common cause is async form data: the first render passes undefined, then later a string arrives from state. Pick one owner from the start.

JSX

// ❌ Warns: uncontrolled first, controlled later
function ProfileName({ user }) {
  return <input value={user?.name} onChange={() => {}} />;
}

// ✅ Controlled from the first render
function ProfileNameFixed({ user }) {
  const [name, setName] = useState(user?.name ?? '');
  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

// ✅ Uncontrolled on purpose
function SearchBox() {
  const ref = useRef(null);
  return <input ref={ref} defaultValue="" />;
}

Important follow-ups

defaultValue vs value: defaultValue sets the initial DOM value for uncontrolled inputs; value makes React the owner on every render.
File inputs: Browsers own file input values for security reasons, so file inputs are effectively uncontrolled.
Reset behavior: Controlled inputs reset from React state; uncontrolled inputs reset through the DOM or form reset APIs.

When to Use Each

Controlled Components: When you need form validation, dynamic behavior, or real-time updates (e.g., search inputs, login forms).
Uncontrolled Components: When simple or legacy forms are needed, and performance or quick prototyping is prioritized.

Pros and Cons

Controlled: Predictable, easier to debug, suitable for complex interactions.
Uncontrolled: Simpler, faster for basic use cases, but harder to validate and synchronize with app state.

Controlled components put React in charge of the form state — think of it as React 'holding the pen' while you type.

Practical scenario
A login form needs validation and error messages, so inputs are controlled by React state.

Common pitfalls

Mixing controlled and uncontrolled inputs in the same field.
Forgetting defaultValue when using uncontrolled inputs.
Causing re-render lag on large forms.

Trade-off or test tip
Controlled inputs are testable but verbose. Test form reset and validation flows.

Summary

Controlled components store input values in React state.
Uncontrolled components rely on DOM references.
Controlled inputs are ideal for validation, while uncontrolled are simpler but less powerful.