Controlled vs Uncontrolled Components in React (Beginner Friendly)

When you start learning React, one of the first confusing topics you’ll face is the difference between Controlled and Uncontrolled Components. Don’t worry — by the end of this post, you’ll understand this clearly with simple examples.

🎯 What Does It Mean?

In simple words:

• Controlled Component → React is in charge of the input’s value.
• Uncontrolled Component → The browser (DOM) is in charge of the input’s value.

Think of it like this:

• In Controlled Components, React acts like a teacher, checking every word you write in your notebook.
• In Uncontrolled Components, React acts like a teacher who lets you write freely and only checks your notebook at the end.

📝 Controlled Components

In a controlled component, the form input is linked to React state. That means React always knows what’s inside the input, and it updates automatically when you type.

Example: Controlled Input

import React, { useState } from "react";

function ControlledForm() {
  const [name, setName] = useState(""); // React state

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Submitted Name: " + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name} // value comes from React state
        onChange={(e) => setName(e.target.value)} // update state
        placeholder="Enter your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;

👉 Here:

• The input value is always controlled by React.
• When you type, React updates the state and then shows the updated value back in the input.
• React is the single source of truth.

📝 Uncontrolled Components

In an uncontrolled component, the input manages its own value just like in plain HTML. You don’t use state, instead you use a ref to get the value when needed.

Example: Uncontrolled Input

import React, { useRef } from "react";

function UncontrolledForm() {
  const nameRef = useRef(); // reference to input

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Submitted Name: " + nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        ref={nameRef} // React does not control this input
        placeholder="Enter your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

👉 Here:

• The browser keeps track of what you type.
• React doesn’t know the input value until you read it with ref.
• DOM is the source of truth.

🔑 Key Differences

🚀 When Should You Use Which?

• ✅ Use Controlled Components when you need:
  • Form validation (e.g., check if email is valid while typing)
  • Live updates (e.g., show typed text somewhere else instantly)
  • Complex or large forms
• ✅ Use Uncontrolled Components when you need:
  • Simple, one-time form submissions
  • Quick prototypes
  • Minimal React state management

🎓 Final Takeaway

• Controlled → React is the boss. It decides what’s in the input.
• Uncontrolled → Browser is the boss. React just asks for the value when needed.

👉 As a beginner, it’s usually best to start with Controlled Components because they give you more power and flexibility. But knowing Uncontrolled Components will help you understand how React works with the DOM.