Controlled Vs Uncontrolled Components In React? Complete Guide

Controlled components have their state managed by React.
The value of input elements is bound to state and updated via onChange.

import React, { useState } from "react";

function ControlledInput() {
  const [value, setValue] = useState("");

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

✅ React fully controls the input value.

---

Uncontrolled Components

Uncontrolled components manage their own state internally.
Use ref to access the value when needed.

import React, { useRef } from "react";

function UncontrolledInput() {
  const inputRef = useRef();

  const handleClick = () => {
    alert(`Value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Show Value</button>
    </div>
  );
}

✅ Input manages its own state; React reads it via ref.

---

Key Differences

Feature	Controlled	Uncontrolled
State Management	Managed by React state	Managed by DOM
Value Access	Direct from state	Using refs
Updates	onChange handler required	No handler needed
Use Case	Forms with validation	Simple inputs, quick prototypes

---

Conclusion

Use controlled components for predictable form handling and validation, and uncontrolled components for simple or legacy inputs.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP