React: Controlled vs Uncontrolled components?

Controlled and Uncontrolled are two approaches to working with forms in React.

Simple analogy: Imagine you are ordering pizza by phone.

• Controlled — the operator repeats your order: "You ordered Pepperoni pizza, 30 cm, correct?" You confirm. All data is stored with the operator (in React state), and is synchronized with you on every change.
• Uncontrolled — you just say "Pepperoni, 30 cm" and hang up. The operator writes the order in their book (in DOM). If you need to know what you ordered — you need to ask the operator (read value from ref).

Controlled (through state):

1function Form() {
2    const [name, setName] = useState('');
3    
4    return (
5        <input
6            value={name}  // Value from state
7            onChange={e => setName(e.target.value)}  // Update state
8        />
9    );
10}

React fully controls the value. Every character input → setState → re-render. Pros: easy to validate, easy to submit form, easy to reset.

Uncontrolled (through ref):

1function Form() {
2    const inputRef = useRef();
3    
4    function handleSubmit() {
5        alert(inputRef.current.value);  // Read from DOM directly
6    }
7    
8    return (
9        <input ref={inputRef} defaultValue="" />
10    );
11}

Value is stored in DOM. React does not control it (defaultValue is only for initial value). Pros: fewer re-renders, simpler for simple forms.

When to use what:

• Controlled — when you need validation, dynamic updates (calculator), complex logic.
• Uncontrolled — when the form is simple and does not require real-time validation.

Performance consideration: Controlled components re-render on every keystroke. For forms with many inputs, this can be noticeable. Uncontrolled components avoid this since values live in the DOM.

Common mistake: Forgetting e.preventDefault() in onSubmit handler for controlled forms, which causes a full page reload.