Controlled components in React are those whose form data is managed by React state, while uncontrolled components manage their own state internally through the DOM. Controlled components offer more predictable, testable, and synchronized data flow, whereas uncontrolled components are simpler but less flexible. Controlled inputs enable validation and state sync but can be verbose; uncontrolled inputs are simpler but harder to test. Test with form reset and validation.
What is the difference between controlled and uncontrolled components?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
React provides two ways to handle form inputs: controlled and uncontrolled components. Controlled components rely on React state as the single source of truth, while uncontrolled components use the DOM’s internal state via ref to manage data.
Type | Description | Data Source |
|---|---|---|
Controlled Component | React state controls the input value. Each keystroke triggers a state update. | React state |
Uncontrolled Component | Input value is handled by the DOM itself and accessed via | DOM element |
JSX
// Controlled Component
function ControlledInput() {
const [value, setValue] = useState('');
return (
<input value={value} onChange={(e) => setValue(e.target.value)} />
);
}
// Uncontrolled Component
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => alert(inputRef.current.value);
return (
<>
<input ref={inputRef} />
<button onClick={handleSubmit}>Submit</button>
</>
);
}
When to Use Each
- Controlled Components: When you need form validation, dynamic behavior, or real-time updates (e.g., search inputs, login forms).
- Uncontrolled Components: When simple or legacy forms are needed, and performance or quick prototyping is prioritized.
Pros and Cons
- Controlled: Predictable, easier to debug, suitable for complex interactions.
- Uncontrolled: Simpler, faster for basic use cases, but harder to validate and synchronize with app state.
Controlled components put React in charge of the form state — think of it as React 'holding the pen' while you type.
Practical scenario
A login form needs validation and error messages, so inputs are controlled by React state.
Common pitfalls
- Mixing controlled and uncontrolled inputs in the same field.
- Forgetting defaultValue when using uncontrolled inputs.
- Causing re-render lag on large forms.
Controlled inputs are testable but verbose. Test form reset and validation flows.
Summary
- Controlled components store input values in React state.
- Uncontrolled components rely on DOM references.
- Controlled inputs are ideal for validation, while uncontrolled are simpler but less powerful.
Similar questions
Guides