This content originally appeared on DEV Community and was authored by Aman Kureshi
When working with forms in React, you’ll come across controlled and uncontrolled components. Let’s break it down 👇
đź“Ś Controlled Component
The form data is handled by React state.
function App() {
const [name, setName] = useState("");
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
/>
);
}
âś… React fully controls the input.
đź“Ś Uncontrolled Component
The form data is handled by the DOM itself using ref.
function App() {
const inputRef = useRef();
return (
<input ref={inputRef} />
);
}
✅ Useful when you don’t need to track every change.
✨ Key Difference:
• Controlled → State managed by React.
• Uncontrolled → State managed by DOM.
👉 Rule of thumb: Use controlled components when you need form validation or dynamic updates. 🚀
This content originally appeared on DEV Community and was authored by Aman Kureshi
Aman Kureshi | Sciencx (2025-08-31T13:29:15+00:00) 🎨 Controlled vs Uncontrolled Components in React: What’s the Difference?. Retrieved from https://www.scien.cx/2025/08/31/%f0%9f%8e%a8-controlled-vs-uncontrolled-components-in-react-whats-the-difference/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.