Uncontrolled Inputs

useRef or FormData

Example

The DOM keeps the value; you read it only when needed (on submit). Less code, but React does not know the value while typing.

export default function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    alert(JSON.stringify(data));
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="city" defaultValue="Pune" />
      <input name="pin" placeholder="PIN" />
      <button>Send</button>
    </form>
  );
}

Result

Controlled vs Uncontrolled

ControlledUncontrolled
Value lives inReact statethe DOM
Read valueany time from stateref / FormData on submit
Instant validation, formattingeasyharder
Initial valuevaluedefaultValue