Tag: programming

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.