Controlled vs Uncontrolled components in react

1. Controlled Component

   A controlled component is a form element whose value is managed by React state.
   The input value is passed via the value prop, and updates happen through an onChange handler.

2. Uncontrolled Component

   An uncontrolled component is a form element that manages its own state in the DOM.
   React accesses the value only when needed using a ref.

---

🔑 Key Difference (One-Line Answer)

Controlled components are driven by React state, while uncontrolled components rely on the DOM for storing input values.

---

How They Work

Controlled Flow

User types → onChange → setState → re-render → updated value

Uncontrolled Flow

User types → DOM stores value → React reads via ref when needed

---

Code Comparison

Controlled Example

const [name, setName] = useState("");

<input
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

Uncontrolled Example

const nameRef = useRef();

<input ref={nameRef} />