What are controlled and uncontrolled components in React?

In React interviews, this is a very common concept because it tests your understanding of form handling and state management.

Controlled Components

A controlled component is a form element (like input, textarea, select) whose value is controlled by React state.

React becomes the single source of truth.

✔️ How it works

Value is stored in React state
Updated using onChange
UI always reflects state

Example

function ControlledInput() {
  const [name, setName] = React.useState("");

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

Key Points (Interview)

State controls input value
Predictable and easier to validate
Real-time validation possible
Preferred in most React applications

Uncontrolled Components

An uncontrolled component is where form data is handled by the DOM itself, not React state.

You access the value using ref instead of state.

How it works

DOM manages the value
React reads value using useRef

Example

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

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

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

Key Points (Interview)

DOM is the source of truth
No state updates on every keystroke
Simpler but less flexible
Useful for quick or legacy form handling

Controlled vs Uncontrolled

Feature	Controlled	Uncontrolled
Source of truth	React state	DOM
Data flow	React-driven	DOM-driven
Validation	Easy & real-time	Harder
Performance	Slightly heavier	Faster (less re-render)
Usage	Preferred	Rare / specific cases

When to use what?

Use Controlled Components when:

You need validation
You need dynamic UI updates
You want full control over form data

Use Uncontrolled Components when:

Simple form inputs
File uploads
Integrating with non-React libraries

Interview Tip

A strong answer ends like this:

“In modern React applications, controlled components are generally preferred because they give React full control over form state, making validation and data flow predictable. Uncontrolled components are used only in specific cases where direct DOM access is simpler or more efficient.”