Controlled vs. Uncontrolled Components & Form State

In React form handling, components are either controlled or uncontrolled based on where form input state is maintained. Controlled components store input state in React (useState), updating state on every keystroke. Uncontrolled components let the browser DOM maintain input state natively, reading values using React useRef or FormData on submit.

Uncontrolled components yield superior performance for massive form fields by eliminating input re-renders on every character typed. Controlled components excel when instant inline validation, character count limits, or dynamic field dependencies are required.

Before

Excessive Controlled State Re-renders

1// Re-renders component on every single keystroke2const [text, setText] = useState('');3return <input value={text} onChange={e => setText(e.target.value)} />;

After

Uncontrolled Input with Ref / Form Action

1// 0 re-renders during typing; reads value on submit2const inputRef = useRef<HTMLInputElement>(null);3const handleSubmit = (e: React.FormEvent) => {4  e.preventDefault();5  console.log(inputRef.current?.value);6};7return <input ref={inputRef} defaultValue="Hello" />;

Exercise

Build a multi-field user registration form using native FormData handling (uncontrolled) and compare its re-render count against a controlled form.

Check your understanding

When should you prefer an uncontrolled component over a controlled one?Show answerHide answer
Answer
For large forms where rendering performance matters and instant validation on every single keystroke is not needed.
What prop initializes value in an uncontrolled input component?Show answerHide answer
Answer
Use defaultValue instead of value.