React Uncontrolled Components

What is Uncontrolled Components in React?

An uncontrolled input keeps its own value in the DOM, exactly like a plain HTML form. You read the value when you need it — usually on submit — through a ref, and set an initial value with defaultValue rather than value.

Why Uncontrolled Components matters

For a simple form that only matters at submit time, uncontrolled inputs avoid a re-render per keystroke and less code. File inputs are always uncontrolled because their value cannot be set programmatically.

Uncontrolled Components example

function QuickApply() {
  const nameRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    console.log(nameRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="" />
      <input type="file" name="resume" />   {/* always uncontrolled */}
      <button>Submit</button>
    </form>
  );
}

How this works

The DOM node holds the text; React never re-renders while the user types. On submit you read current.value once.

Controlled vs uncontrolled

Common mistakes with Uncontrolled Components

• Using value instead of defaultValue on an uncontrolled input, which freezes it.
• Switching a field between controlled and uncontrolled during its lifetime.