How do Controlled Components and Uncontrolled Components differ, and when should you prefer each?

Short answer

A Controlled component's value is managed by React state (useState), while an Uncontrolled component keeps its value in the DOM and is read through a Ref or FormData.

Explanation

Controlled components provide immediate control over validation and enabling or hiding fields, but trigger a re-render on every keystroke. Uncontrolled components perform better and integrate easily with external DOM libraries and large forms where values are read only at submission (onSubmit).

Code example

// Controlled Component
const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />

// Uncontrolled Component
const emailRef = useRef<HTMLInputElement>(null);
<input ref={emailRef} defaultValue="[email protected]" />

Common mistakes

• Accidentally changing an input from Uncontrolled to Controlled by passing undefined initially and a string later.

Follow-up questions

• Why can React Hook Form (RHF) perform better than traditional Formik forms?
• What are Server Actions in React 19, and how do they simplify form submission without JavaScript?

Sources

• React docs — <input>