Lesson 38 — Controlled vs Uncontrolled Inputs in React

🧭 Introduction

Forms are a core part of almost every React application — login forms, registration forms, surveys, search boxes, and more.

In React, form inputs are handled in two different ways:

• Controlled Inputs
• Uncontrolled Inputs

Understanding the difference between them is very important for writing clean, predictable, and scalable React forms.

In this lesson, you will learn:

• What controlled inputs are
• What uncontrolled inputs are
• Differences between them
• When to use each approach
• Best practices and common mistakes

❓ What are Controlled Inputs?

A controlled input is an input element whose value is:

Fully controlled by React state.

This means:

• Input value comes from useState
• Every change updates React state
• React is the single source of truth

🧩 Controlled Input Example

import { useState } from "react";

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

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <p>You typed: {name}</p>
    </form>
  );
};

export default ControlledForm;

🧠 How It Works

1️⃣ User types in input
2️⃣ onChange fires
3️⃣ State updates
4️⃣ Input re-renders with new value

✅ Advantages of Controlled Inputs

✔ Easy validation
✔ Easy form submission
✔ Real-time updates
✔ Predictable behavior

❌ Disadvantages of Controlled Inputs

❌ More code
❌ Re-renders on every keystroke (usually fine)

❓ What are Uncontrolled Inputs?

An uncontrolled input is an input element where:

The value is managed by the DOM, not React state.

React accesses the value only when needed using a ref.

🧩 Uncontrolled Input Example

import { useRef } from "react";

const UncontrolledForm = () => {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} placeholder="Enter name" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default UncontrolledForm;

🧠 How Uncontrolled Inputs Work

✔ DOM manages the value
✔ React reads value only when required
✔ Less React state

✅ Advantages of Uncontrolled Inputs

✔ Less code
✔ Better performance for very large forms
✔ Simple for basic use cases

❌ Disadvantages of Uncontrolled Inputs

❌ Harder validation
❌ Less control
❌ Not suitable for dynamic forms

🆚 Controlled vs Uncontrolled Inputs

🧠 Which One Should You Use?

✅ Use Controlled Inputs When:

• You need validation
• You need dynamic behavior
• You want predictable form state
• Building real-world apps

⚠ Use Uncontrolled Inputs When:

• Simple form
• Minimal logic
• Performance-critical scenarios

👉 Most professional React apps use controlled inputs.

⚠ Common Mistakes

❌ Mixing controlled and uncontrolled inputs
❌ Forgetting onChange in controlled inputs
❌ Using refs everywhere
❌ Overcomplicating simple forms

🎯 Best Practices

✅ Prefer controlled inputs
✅ Keep form state centralized
✅ Use libraries like React Hook Form (next lessons)
✅ Avoid unnecessary re-renders

❓ FAQs — Controlled vs Uncontrolled Inputs

🔹 Are uncontrolled inputs bad?

No. They are useful in simple cases, but limited.

🔹 Which approach is faster?

Uncontrolled inputs are slightly faster, but controlled inputs are usually fast enough.

🔹 Can I mix both?

Avoid mixing in the same input. It causes warnings.

🔹 What do most real apps use?

Controlled inputs or form libraries built on them.

🧠 Quick Recap

✔ Controlled inputs use React state
✔ Uncontrolled inputs use refs
✔ Controlled inputs are predictable
✔ Choose based on use case

🎉 Conclusion

Understanding controlled vs uncontrolled inputs is a foundational concept for mastering forms in React. This lesson prepares you for advanced form handling, validation, and libraries.

You’ve now officially entered serious form handling in React 📝🚀

👉 Next Lesson (SECTION 8):
Lesson 39 — Forms in React