Concept of Controlled and Uncontrolled

Naveen Kumar

@naveen09

Created

Feb 4, 2026

Last Modified

2 months ago

Concept of Controlled and Uncontrolled

Controlled components manage form data using React's state.
Uncontrolled components manage form data using the DOM itself.

Controlled Components

In controlled components, React state controls the input element's value, making the component the "single source of truth". Data is stored in component state. Changes are managed by an onChange handler that updates the state. They are suitable for forms needing real-time validation or complex interactions.

Uncontrolled Components

Uncontrolled components let DOM elements handle form data, similar to standard HTML forms. Data is managed by the DOM's internal state. You use a useRef hook to access the DOM node and get its value, typically during form submission. They work well for simple forms or when integrating with non-React libraries.

Summary of Differences

Feature	Controlled Components	Uncontrolled Components
Source of Truth	React component state	The DOM itself
Data Access	Via state variable	Via `ref`
Updates	Handled by `onChange` event	Handled manually (often on form submit)
Validation	Easier to implement real-time validation	Validation usually occurs on form submission
Code Verbosity	Requires more boilerplate code (state & handler)	Generally simpler for basic forms

I am new to react and while learning I come across this example of controlled component.

javascript

function App() {
  let [fName, setFName]=useState('');

  return (
    <div className="container">
      <h1>Hello {fName }</h1>
      <input name ='fname' value={fName} onChange={(e)=> setFName(e.target.value)} type="text" placeholder="What's your first name?" />

    </div>
  );
}

just adding value={fName} makes is controlled . I don't actually understand what does it mean by controlled component and uncontrolled. Can you explain it from beginner prospective.