What are controlled and uncontrolled components?

Controlled components have their form data handled by React state. Uncontrolled components store form data in the DOM itself.

// Controlled component
function ControlledInput() {
  const [value, setValue] = useState("");
  return (
    <input 
      value={value} 
      onChange={e => setValue(e.target.value)} 
    />
  );
}

// Uncontrolled component
function UncontrolledInput() {
  const inputRef = useRef();
  return <input ref={inputRef} />;
}