Keep Keystroke Cost Low

A controlled input turns every keypress into a React render of its owning component and everything below it. If that subtree is expensive — a chart, an editor, a formatted list — the input visibly lags behind the user's fingers. Uncontrolled inputs (defaultValue + a ref) let the DOM own the value, so typing costs zero renders. When you do need controlled state, keep the subtree it feeds trivial: hoist the state down to the input, memoize expensive children, or defer the derived work with useDeferredValue.