What is the difference between controlled and uncontrolled components?

A controlled component is driven by React state, while an uncontrolled component manages its own state via the DOM.

⚙️ Controlled Example

function Form() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

✅ State is the single source of truth.

⚡ Uncontrolled Example

function Form() {
  const inputRef = useRef();
  const handleSubmit = () => alert(inputRef.current.value);
  return <input ref={inputRef} />;
}

✅ Uses the DOM directly (via refs).