Controlled vs Uncontrolled — React Deep Dive

who owns the input's value?

Every form input has a current value. The question is who holds it: React (in useState) or the DOM (read via useRef on demand). A controlled input renders {'{value: text, onChange: setText}'} so React sees every keystroke and can transform, validate, or gate it. An uncontrolled input renders {'{defaultValue, ref: inputRef}'} and behaves like a 1995 HTML form — React ignores it until you reach in and read inputRef.current.value. The reset hatch for BOTH: change the component's key to remount it fresh.

dimension	controlled	uncontrolled
source of truth	React state (`useState`)	the DOM (read via `ref.current.value`)
props you pass	`value` + `onChange`	`defaultValue` (initial) + `ref`
every keystroke?	yes — React re-renders on each one	no — DOM updates silently, React uninvolved
validation / formatting	trivial — transform inside render	imperative — read on submit, then mutate
read on submit	`text` is already in scope	`inputRef.current.value`
must be uncontrolled	—	`<input type="file">` (JS can't set file value)

1 · the three inputs you write (edit me)

// CONTROLLED — React state is the single source of truth.
// value prop is derived from state; onChange pushes the next character back in.
// We transform to UPPERCASE inside render — proves React sees every keystroke.
function ControlledDemo() {
  var state = React.useState('');
  var text = state[0];
  var setText = state[1];

  return (
    <div data-testid="controlled" className="p-4 bg-[#0d1117] rounded-lg border border-[#30363d]">
      <div className="text-xs text-[#8b949e] uppercase mb-2">controlled · React owns value</div>
      <input
        data-testid="controlled-input"
        value={text.toUpperCase()}
        onChange={function (e) { setText(e.target.value); }}
        placeholder="type here"
        className="w-full px-3 py-2 bg-[#010409] border border-[#30363d] rounded text-[#e6edf3] text-sm outline-none focus:border-[#61dafb]"
      />
      <div data-testid="char-count" className="mt-2 text-xs text-[#8b949e]">
        chars: <span className="text-[#61dafb]">{text.length}</span>
      </div>
    </div>
  );
}

// UNCONTROLLED — the DOM owns the value. defaultValue sets the initial text;
// React never re-renders on typing. On submit we READ ref.current.value once.
function UncontrolledDemo() {
  var inputRef = React.useRef(null);
  var state = React.useState('');
  var msg = state[0];
  var setMsg = state[1];

  return (
    <div data-testid="uncontrolled" className="p-4 bg-[#0d1117] rounded-lg border border-[#30363d]">
      <div className="text-xs text-[#8b949e] uppercase mb-2">uncontrolled · DOM owns value</div>
      <form
        onSubmit={function (e) {
          e.preventDefault();
          setMsg('submitted: ' + inputRef.current.value);
        }}
      >
        <input
          data-testid="uncontrolled-input"
          ref={inputRef}
          defaultValue="hello"
          className="w-full px-3 py-2 bg-[#010409] border border-[#30363d] rounded text-[#e6edf3] text-sm outline-none focus:border-[#61dafb]"
        />
        <button
          data-testid="uncontrolled-submit"
          type="submit"
          className="mt-2 px-3 py-1.5 bg-[#61dafb] text-[#0d1117] rounded text-xs font-bold hover:opacity-80"
        >submit & read</button>
      </form>
      <div data-testid="uncontrolled-msg" className="mt-2 text-xs text-[#61dafb] break-all">{msg}</div>
    </div>
  );
}

// KEY-RESET — works for EITHER pattern. Changing the `key` prop tells React
// "this is a different component"; it unmounts the old one (wiping state) and
// mounts a fresh one. Here we use it on a controlled input, but it resets
// uncontrolled state (defaultValue reapplied) too.
function KeyedInput(props) {
  var state = React.useState('');
  var text = state[0];
  var setText = state[1];

  return (
    <input
      key={props.k}
      data-testid="keyreset-input"
      value={text}
      onChange={function (e) { setText(e.target.value); }}
      placeholder="type, then reset"
      className="w-full px-3 py-2 bg-[#010409] border border-[#30363d] rounded text-[#e6edf3] text-sm outline-none focus:border-[#61dafb]"
    />
  );
}

function KeyResetDemo() {
  var state = React.useState(0);
  var key = state[0];
  var setKey = state[1];

  return (
    <div data-testid="keyreset" className="p-4 bg-[#0d1117] rounded-lg border border-[#30363d]">
      <div className="text-xs text-[#8b949e] uppercase mb-2">key-reset · remount wipes state</div>
      <KeyedInput k={key} />
      <button
        data-testid="reset-key"
        onClick={function () { setKey(key + 1); }}
        className="mt-2 px-3 py-1.5 border border-[#61dafb] text-[#61dafb] rounded text-xs font-bold hover:bg-[#61dafb] hover:text-[#0d1117]"
      >reset via key</button>
      <div className="mt-2 text-xs text-[#8b949e]">key = <span data-testid="key-val" className="text-[#61dafb]">{key}</span></div>
    </div>
  );
}

function App() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
      <ControlledDemo />
      <UncontrolledDemo />
      <KeyResetDemo />
    </div>
  );
}

createRoot(document.getElementById('root')).render(<App/>);

2 · Babel compiles JSX → element tree

<input value={"{text.toUpperCase()}"} onChange={...}/> becomes React.createElement('input', {'{ value: text.toUpperCase(), onChange: ... }'}). On every setText, React re-renders and pushes the new value prop to the DOM. The uncontrolled input has no value prop at all — just defaultValue + ref.

// (hit "compile & render" to see Babel's output)

3 · live React (the three patterns, proven)

Type in the controlled box → it uppercases and the char counter ticks. Click "submit & read" on the uncontrolled box → it reads back the defaultValue. Type in the key-reset box then click "reset via key" → the input is wiped because the new key remounts it. The gold-check runs all four assertions automatically below.

status: — · gold: empty initially → type "hello" → HELLO + 5 chars → submit → reads "hello" → key-reset → cleared

intent → pattern

intent	pattern	why
validate / format each keystroke	`value={text} onChange={'{e => setText(e.target.value)}'}`	controlled — transform inside render, React sees every char
read once on submit, ignore typing	`defaultValue="x" ref={inputRef}` + read `.current.value`	uncontrolled — fewer re-renders, traditional HTML form feel
upload a file	`<input type="file" ref={fileRef}/>`	file inputs MUST be uncontrolled — JS can't set `.value` for security
reset a form field	controlled: `setText('')` · uncontrolled: `ref.current.value = ''`	or change the parent's `key` to remount everything fresh
nuclear reset (wipe all state)	`<Form key={resetCounter}/>`, increment on reset	new key unmounts old tree, mounts fresh — state of every child reset
mix initial value + control	`useState(initialValue)` then render `value={state}`	NEVER use `defaultValue` with `value` — pick one owner