Controlled vs Uncontrolled — Handling Form Inputs

After completing this topic, you will:

Understand the difference between the two ways of handling input in React, and be able to choose the one that is right for your situation.

Basic HTML Behavior

HTML inputs manage their own values:

<input type="text" />

When a user types, the input itself stores the value. It works without involving JavaScript.

In React, you choose whether React manages this value or the input manages it itself.

Controlled: React Manages

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

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

The value is tied to a state, and the state is updated with onChange. When the user types:

1. An onChange event occurs.
2. The state is changed with setQuery.
3. The component re-renders.
4. The new value is reflected in the input.

React controls the value of the input. That's why it's called "Controlled."

Advantages: Complete control over the input value. Enables real-time validation, input limiting, and formatting.

function PhoneInput() {
  const [phone, setPhone] = useState("");

  const handleChange = (e) => {
    const cleaned = e.target.value.replace(/\D/g, "");
    if (cleaned.length <= 11) {
      setPhone(cleaned);
    }
  };

  return <input value={phone} onChange={handleChange} />;
}

Only numbers can be entered, and the input is limited to 11 characters.

Uncontrolled: The DOM Manages

function FileUpload() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    const file = inputRef.current.files[0];
    console.log(file.name);
  };

  return (
    <div>
      <input type="file" ref={inputRef} />
      <button onClick={handleSubmit}>Upload</button>
    </div>
  );
}

You directly access the DOM element with ref to read the value. It doesn't go through React state. The input manages the value itself, and you read it only when needed.

File inputs cannot be programmatically set with value for security reasons, so they must be uncontrolled.

Choosing Between Them

Use Controlled when:

• You need real-time validation (checking email format, limiting the number of characters).
• You need to immediately display a different UI based on the input value.
• You need to manage the values of multiple inputs with a single state.
• You need to process the data before submitting the form.

Use Uncontrolled when:

• You are uploading files.
• You only need to read the value at submission time.
• You are migrating an existing HTML form to React.

In most cases, Controlled is the default choice. The React official documentation also recommends Controlled.

Key Takeaways

A Controlled component has its input value managed by React state. This enables real-time control. An Uncontrolled component has its value managed by the DOM, and you read it when needed using a ref. In most forms, Controlled is the default choice.