Controlled vs Uncontrolled Components in React

In React when working with forms there are two approaches to managing field values: controlled and uncontrolled components.

Controlled Component

This is a component where form value is stored in React component state, and any user input change happens through onChange and state update.

Example:

import { useState } from "react";

function ControlledInput() {
  const [value, setValue] = useState("");

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

Here:

• value is managed through React state
• React knows actual value at any moment
• Can validate/update data on the fly

Uncontrolled Component

This is a component where value isn't stored in React state but is extracted directly from DOM using ref.

Example

import { useRef } from "react";

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

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

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

Here:

• React doesn't know what value input has right now
• Value is obtained only when needed
• Simple to implement, especially if need access to value once

Comparison Table

When to Use?

Controlled:

• If need to validate input in real time
• For complex forms
• When full control is important

Uncontrolled:

• Simple forms or fields
• When value needed only on submit
• Integration with third-party libraries