Controlled vs Uncontrolled Components Interview Questions

One of the most common React interview questions is:

What is the difference between Controlled and Uncontrolled Components?

Most developers answer:

Controlled uses state.
Uncontrolled uses refs.

While technically correct, interviewers often go deeper:

• Why does React prefer controlled components?
• When should uncontrolled components be used?
• What are the performance tradeoffs?
• How does form state management work internally?
• Which approach is better for large forms?

Let's understand both concepts from first principles.

1. Why Do We Need Form State Management?

Consider a simple input field.

<input />

A user types:

H
He
Hel
Hell
Hello

Question:

Where should this data live?

Two possible answers:

Inside React State

or

Inside The DOM

These approaches lead to:

Controlled Components
 
Uncontrolled Components

2. Controlled Components: React-Managed State

A controlled component is a form element whose value is controlled by React state.

Example:

function LoginForm() {
  const [email, setEmail] = useState("");
 
  return <input value={email} onChange={(e) => setEmail(e.target.value)} />;
}

React becomes the:

Single Source Of Truth

How Controlled Components Work

Flow:

User Types
      ↓
onChange Fires
      ↓
State Updates
      ↓
Component Re-renders
      ↓
Input Receives New Value

Visual Representation

Input
  ↓
onChange
  ↓
React State
  ↓
Re-render
  ↓
Input Value

React fully controls the input.

Controlled Component Example

function UsernameForm() {
  const [username, setUsername] = useState("");
 
  return (
    <>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
 
      <p>{username}</p>
    </>
  );
}

Output updates immediately as the user types.

Benefits of Controlled Components

Because React owns the state:

You can easily:

• Validate input
• Format values
• Disable submit buttons
• Show errors
• Sync UI with state
• Persist form data

Example: Validation

const [email, setEmail] = useState("");

const isValid = email.includes("@");

<button disabled={!isValid}>Submit</button>

Very easy because React already has the value.

3. Uncontrolled Components: DOM-Managed State

An uncontrolled component stores its value inside the DOM instead of React state.

Example:

function LoginForm() {
  const inputRef = useRef(null);
 
  return <input ref={inputRef} />;
}

React does not track every keystroke.

The DOM manages the value.

How Uncontrolled Components Work

Flow:

User Types
      ↓
DOM Updates
      ↓
Value Stored In DOM
      ↓
Read Value Later

React is not involved in every update.

Reading Values from Uncontrolled Components

Example:

function LoginForm() {
  const inputRef = useRef(null);
 
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
 
  return (
    <>
      <input ref={inputRef} />
 
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Output:

Current Input Value

is read only when needed.

Visual Representation

Input
  ↓
DOM Stores Value
  ↓
Ref Reads Value

React state is not involved.

4. Side-by-Side Comparison Example

Controlled

<input value={name} onChange={(e) => setName(e.target.value)} />

Source of truth:

React State

Uncontrolled

<input ref={inputRef} />

Source of truth:

DOM

Interview Question

Which One Causes Re-renders?

Controlled

Every State Update
      ↓
Re-render

Uncontrolled

Typing
      ↓
No Re-render

React state does not change.

5. Performance Considerations & Re-renders

A common senior-level interview topic.

Suppose:

100 Inputs

Each controlled.

Every keystroke:

State Update
      ↓
Re-render

For very large forms:

Performance Cost

may increase.

Why Controlled Components Are Still Preferred

Despite additional re-renders:

React applications usually benefit from:

Predictability

and

Better State Management

More than they suffer from the small rendering overhead.

6. Real-World Use Cases

Controlled:

const [query, setQuery] = useState("");

<input value={query} onChange={(e) => setQuery(e.target.value)} />

Perfect for:

• Search
• Filters
• Validation
• Dynamic UI

Real-World Example: File Upload

Uncontrolled:

const fileRef = useRef(null);

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

File inputs are commonly handled as uncontrolled components.

Why File Inputs Are Usually Uncontrolled

Browsers restrict programmatic control over file selections.

Example:

<input type="file" />

The DOM remains the source of truth.

7. defaultValue vs. value

Interviewers frequently ask this.

Controlled

<input value={name} />

React controls the value.

Uncontrolled

<input defaultValue="John" />

Only sets the initial value.

After that:

DOM Takes Over

Common Interview Question

Can a Component Switch Between Both?

Technically yes.

But React warns against it.

Bad:

<input value={value} />

Later:

<input defaultValue="John" />

React may show warnings.

8. Integration with Form Libraries: React Hook Form

Many modern form libraries use:

Uncontrolled Components

internally.

Example:

React Hook Form

This improves performance for large forms.

Controlled Component Use Cases

Best for:

• Search Inputs
• Validation
• Dynamic Forms
• Conditional UI
• Live Previews
• Calculated Fields

Uncontrolled Component Use Cases

Best for:

• File Uploads
• Simple Forms
• Legacy Integrations
• Third-Party DOM Libraries
• Performance-Sensitive Large Forms

9. Common Interview Q&A

What Is a Controlled Component?

A form element whose value is managed by React state.

What Is an Uncontrolled Component?

A form element whose value is managed by the DOM.

What Hook Is Commonly Used for Uncontrolled Components?

useRef();

Which Approach Does React Prefer?

Generally:

Controlled Components

because they provide better predictability.

Which Approach Is More Performant?

Typically:

Uncontrolled Components

because typing does not trigger re-renders.

Why Are File Inputs Usually Uncontrolled?

Because browsers restrict direct programmatic control over file values.

Controlled vs Uncontrolled Summary

Senior-Level Interview Answer

Controlled components are form elements whose values are managed entirely by React state. Every change triggers a state update and a re-render, making React the single source of truth. Uncontrolled components store their values inside the DOM and are typically accessed using refs when needed. Controlled components provide better predictability, validation, and integration with React's rendering model, while uncontrolled components can offer better performance in large forms because they avoid state updates on every keystroke. In modern React applications, controlled components are generally preferred, although uncontrolled components remain useful for file inputs and performance-sensitive scenarios.

Common Interview Mistakes

❌ Controlled Components Are Always Better

Correct:

Each approach has
different tradeoffs.

❌ Uncontrolled Components Don't Use React

Correct:

They still use React,
but React does not own
the input value.

❌ useRef Causes Re-renders

Correct:

Updating refs does not
trigger re-renders.

❌ File Inputs Should Be Controlled

Correct:

File inputs are usually
uncontrolled.

Key Takeaways

• Controlled Components: Form elements whose values are fully managed by React state, acting as the single source of truth.
• Uncontrolled Components: Elements whose values live in the DOM, typically accessed using useRef() only when needed.
• Re-rendering Dynamics: Controlled inputs trigger component re-renders on every keystroke, whereas uncontrolled inputs do not.
• Validation & Dynamic UI: Controlled components make instant field validation, input formatting, and dynamic UI changes straightforward.
• Performance Bounds: Uncontrolled components are highly performant for massive forms or complex tables by avoiding constant state-driven renders.
• Special Inputs: File uploads are naturally uncontrolled because browser security blocks programmatic file writes.
• Standard Libraries: Form libraries like React Hook Form leverage uncontrolled inputs internally to combine performance with convenience.