This content originally appeared on DEV Community and was authored by Aman Kureshi
When dealing with form elements in React, there are two main ways to handle input values: controlled and uncontrolled components.
🎯 Controlled Components:
• Form data is stored in React state
• UI reflects the state, and changes are handled via onChange
• Great for validations, real-time updates, and consistency
🔧 Example:
function ControlledInput() {
const [value, setValue] = useState("");
return (
<input
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
🎯 Uncontrolled Components:
• Form data is handled by the DOM itself
• You access the value using ref when needed
• Simpler but less control
🔧 Example:
function UncontrolledInput() {
const inputRef = useRef();
const handleSubmit = () => {
alert(inputRef.current.value);
};
return (
<>
<input ref={inputRef} />
<button onClick={handleSubmit}>Submit</button>
</>
);
}
📌 Key points:
• Use controlled for dynamic, validated forms
• Use uncontrolled for quick, simple inputs
• Controlled = React manages value
• Uncontrolled = DOM manages value
This content originally appeared on DEV Community and was authored by Aman Kureshi
Aman Kureshi | Sciencx (2025-08-12T17:08:53+00:00) ⚖️ Controlled vs Uncontrolled Components in React — Know the Difference. Retrieved from https://www.scien.cx/2025/08/12/%e2%9a%96%ef%b8%8f-controlled-vs-uncontrolled-components-in-react-know-the-difference/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.