Controlled vs Uncontrolled Components in React JS 2025
Controlled vs Uncontrolled Components in React JS (2025)
🔹 What are Controlled Components?
A Controlled Component is a component where React controls the form element’s value through state. You use useState or similar state management.
✅ Example (Controlled):
{`
import { useState } from "react";
function ControlledInput() {
const [value, setValue] = useState("");
return (
setValue(e.target.value)}
/>
);
}
`}
🔹 What are Uncontrolled Components?
In Uncontrolled Components, the DOM handles the input state directly. You use ref to access the value.
✅ Example (Uncontrolled):
{`
import { useRef } from "react";
function UncontrolledInput() {
const inputRef = useRef();
const handleSubmit = () => {
alert(inputRef.current.value);
};
return (
<>
);
}
`}
🧠 Key Differences:
- Controlled: Data flows via React state
- Uncontrolled: Data is accessed from the DOM
- Controlled: Easier to validate, manipulate
- Uncontrolled: Less code, sometimes more performant
💡 When to Use?
- Use Controlled when you need real-time validation or dynamic behavior.
- Use Uncontrolled when you just need to read data on submit.