What is the difference between controlled and uncontrolled components?
Why Interviewers Ask This
This is a classic screening question for React.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
In React, form elements are classified as controlled or uncontrolled based on how their value is managed. Controlled component: React controls the form element's value — it is stored in component state, and every change triggers a state update. The DOM input is always in sync with React state. const [value, setValue] = useState(""); <input value={value} onChange={e => setValue(e.target.value)} />. You have full control: validation, formatting, conditional disabling. This is the recommended approach. Uncontrolled component: the DOM manages its own state — React does not track the value. You access it via a ref when needed: const ref = useRef(); <input ref={ref} />, then ref.current.value. Useful for: file inputs (which cannot be controlled), integrating with non-React code, or when performance of large forms is critical. Rule of thumb: use controlled components by default — they give you a single source of truth and make form state predictable and testable. Use uncontrolled only when necessary (file inputs, third-party DOM libraries).
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a React.js codebase.