Controlled vs Uncontrolled Components — Forms Mastery in React

Forms are everywhere:

• Login pages

• Signup forms

• Search inputs

• Checkout pages

But in React, forms work differently than plain HTML.

Today we understand:

👉 Controlled Components
👉 Uncontrolled Components

---

🧠 1️⃣ Controlled Components

📌 Definition

A Controlled Component is a form element whose value is controlled by React state.

React controls the input.

---

🛠 Example — Controlled Input

import { useState } from "react";

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

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

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

🔎 What’s happening?

• Input value comes from state

• onChange updates state

• React fully controls the input

That’s why it's called Controlled.

---

✅ Advantages of Controlled Components

✔ Easy validation
✔ Real-time error handling
✔ Better control over form data
✔ Predictable behavior

Most real-world apps use this pattern.

---

🧠 2️⃣ Uncontrolled Components

📌 Definition

An Uncontrolled Component stores its own internal state in the DOM.

React does NOT control the input directly.

We use useRef to access its value.

---

🛠 Example — Uncontrolled Input

import { useRef } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted Name: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Here:

• Value is stored in DOM

• React reads it using ref

• No state management

---

🔥 Key Difference

---

🎯 When to Use What?

✔ Use Controlled for:

• Login / Signup forms

• Validation-heavy forms

• Dynamic form behavior

✔ Use Uncontrolled for:

• Simple input fields

• Quick integrations

• When you don’t need validation

---

🧠 Interview One-Liner

Controlled components are managed by React state, while uncontrolled components rely on the DOM to manage their own state.

---

🚀 Real-World Insight

In professional projects:

👉 90% of the time you will use Controlled Components.

Because validation and dynamic UI are very common.

---

✅ Key Takeaways

✔ Controlled = React controls input
✔ Uncontrolled = DOM controls input
✔ Controlled is more powerful
✔ Uncontrolled is simpler

---

🔜 Coming Next

Day 19 — Lifting State Up (Component Communication Mastery)

Now we level up communication between components 🔥