What is the difference between controlled and uncontrolled components?

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).