FrontendHaltReact·Intermediate·Coding·1 min read
Why can't a live character counter be built cleanly with an uncontrolled input?
Short interview answer
React has no visibility into the input's current value between renders when it's DOM-owned — a character counter needs to know the value on every keystroke to update its display, which is exactly what only a controlled input provides.
Example
const [bio, setBio] = useState('');<> <textarea value={bio} onChange={(e) => setBio(e.target.value)} maxLength={160} /> <span>{160 - bio.length} left</span></>Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.