🎨 Controlled vs Uncontrolled Components in React: What’s the Difference?

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