Controlled vs Uncontrolled Inputs in React and When to Use Each

When building forms in React, one of the first concepts developers face is the difference between controlled and uncontrolled inputs.

Understanding when to use each approach can make your forms easier to manage, more scalable, and better performing.

What Are Controlled Inputs?

A controlled input is an input whose value is managed by React state.

Every time the user types, React updates the state, and the input value comes from that state.

Example

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

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

Here:

• React controls the input value
• The component state is the single source of truth
• Every keystroke triggers a re-render

Advantages of Controlled Inputs

Controlled inputs are the most common approach in React because they provide full control over the form.

Benefits

• Easy validation
• Instant UI updates
• Better conditional rendering
• Easier debugging
• Works perfectly with libraries like React Hook Form and Formik

Example Use Cases

Controlled inputs are great when:

• You need live validation
• You want dynamic form behavior
• Input values affect other UI elements
• You need to submit data to APIs

What Are Uncontrolled Inputs?

Uncontrolled inputs store their own state inside the DOM instead of React state.

React accesses the value only when needed using refs.

Example

import { useRef } from "react";

export default function App() {
  const inputRef = useRef();

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

  return (
    <>
      <input
        type="text"
        ref={inputRef}
        placeholder="Enter your name"
      />

      <button onClick={handleSubmit}>
        Submit
      </button>
    </>
  );
}

Here:

• The DOM handles the input state
• React does not re-render on every keystroke
• Values are accessed only when needed

Advantages of Uncontrolled Inputs

Benefits

• Less re-rendering
• Simpler for small forms
• Easier integration with non-React code
• Good for file inputs

Controlled vs Uncontrolled — Main Differences

Controlled Inputs	Uncontrolled Inputs
Managed by React state	Managed by DOM
Re-renders on change	No re-render on typing
Easier validation	Simpler setup
Better for dynamic forms	Better for simple forms
More React-like approach	More traditional HTML behavior

When Should You Use Controlled Inputs?

Use controlled inputs when:

• Building complex forms
• Adding validation
• Creating reusable form components
• Handling conditional logic
• Syncing UI with form values

Most modern React applications use controlled inputs by default.

When Should You Use Uncontrolled Inputs?

Use uncontrolled inputs when:

• The form is very simple
• Performance is critical
• You only need values on submit
• Working with file uploads
• Integrating legacy libraries

My Recommendation

For most React applications:

• Use controlled inputs as the default approach
• Use uncontrolled inputs only when simplicity or performance matters

Controlled components may require more code, but they provide better scalability and maintainability in real projects.

Final Thoughts

Both controlled and uncontrolled inputs solve the same problem differently.

The best choice depends on your project requirements:

• Need control and dynamic behavior? → Controlled
• Need simplicity and fewer re-renders? → Uncontrolled

Knowing both approaches helps you write cleaner and more efficient React applications.