React · Theory

Controlled vs Uncontrolled Components

Theory

20/94

Controlled vs Uncontrolled Components

Controlled: React state is the truth. Every keystroke goes through setState. Easy to validate, disable Submit, test. Uncontrolled: the DOM keeps the text. You read it via ref on submit (or defaultValue for initial). Less re-renders, less control.

Most interview answers: prefer controlled for forms. Use uncontrolled for quick prototypes or heavy uncontrolled widgets (some date libraries). Don’t say one is ‘wrong’ — say which job fits.

Controlled vs Uncontrolled Components — type hooks, submit → logs hooks. DOM kept the text. Controlled would use useState instead.

Diagram

controlled: state → value
  uncontrolled: DOM + ref

Exam tip

Define both. Say when you’d still use a ref.

Example

// Uncontrolled
import { useRef } from "react";

export default function Search() {
  const q = useRef(null);
  function go(e) {
    e.preventDefault();
    console.log(q.current.value);
  }
  return (
    <form onSubmit={go}>
      <input ref={q} defaultValue="" />
      <button>Find</button>
    </form>
  );
}

Controlled vs Uncontrolled Components — type hooks, submit → logs hooks. DOM kept the text. Controlled would use useState instead.

Short notes

DefControlled : state + value + onChange.
RuleUncontrolled : ref / defaultValue.
RememberPrefer : controlled forms.

React · Theory

Controlled vs Uncontrolled Components

← All stacks

Theory

20/94

Controlled vs Uncontrolled Components

Most interview answers: prefer controlled for forms. Use uncontrolled for quick prototypes or heavy uncontrolled widgets (some date libraries). Don’t say one is ‘wrong’ — say which job fits.

Controlled vs Uncontrolled Components — type hooks, submit → logs hooks. DOM kept the text. Controlled would use useState instead.

Diagram

controlled: state → value
  uncontrolled: DOM + ref

Exam tip

Define both. Say when you’d still use a ref.

Example

// Uncontrolled
import { useRef } from "react";

export default function Search() {
  const q = useRef(null);
  function go(e) {
    e.preventDefault();
    console.log(q.current.value);
  }
  return (
    <form onSubmit={go}>
      <input ref={q} defaultValue="" />
      <button>Find</button>
    </form>
  );
}

Controlled vs Uncontrolled Components — type hooks, submit → logs hooks. DOM kept the text. Controlled would use useState instead.

Short notes

DefControlled : state + value + onChange.
RuleUncontrolled : ref / defaultValue.
RememberPrefer : controlled forms.

Controlled vs Uncontrolled Components

Example

Short notes

Questions

Controlled vs Uncontrolled Components

Example

Short notes

Questions