✅ Controlled vs Uncontrolled Components in React

When building forms in React, two important concepts come into play: Controlled Components and Uncontrolled Components. Both approaches handle user input, but they differ in how form data is managed and where the source of truth lives. Understanding this distinction is essential for building scalable, predictable, and maintainable React applications.

✅ What Is a Controlled Component?

A Controlled Component is a form element whose value is fully controlled by React state. The input’s value always comes from state, and every user interaction triggers an onChange event that updates that state. This makes React the single source of truth for the form data.

👉 Example: Controlled Component

import React, { 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>
  );
}

export default ControlledForm;

📌 The value={name} ensures that the input always reflects React state. The DOM never owns the value—React does.

✅ What Is an Uncontrolled Component?

An Uncontrolled Component allows the DOM to manage the input value internally. Instead of syncing the value with React state, you access the value using a ref when needed. In this case, the DOM is the source of truth.

👉 Example: Uncontrolled Component

import React, { useRef } from "react";

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

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

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

export default UncontrolledForm;

📌 Here, React reads the value only when required, not on every keystroke.

🔑 Key Differences

Feature	Controlled Components	Uncontrolled Components
Data handling	Managed by React state	Managed by the DOM
Source of truth	React	DOM
Access value	`useState`	`useRef`
Validation	Easy and real-time	Harder
Re-renders	On every change	Minimal
Best use case	Complex, dynamic forms	Simple, quick forms

🧠 Easy Way to Remember

Controlled components are state-driven, while uncontrolled components are ref-driven. If React controls the value, it’s controlled. If the DOM controls it, it’s uncontrolled.

✅ Best Practices

Use controlled components when you need validation, conditional rendering, or real-time updates. Use uncontrolled components for simple forms or when you want minimal state management. Avoid mixing controlled and uncontrolled logic in the same input. For most production applications, controlled components are the preferred and safer choice.

🧾 Conclusion

Both controlled and uncontrolled components have valid use cases in React. Controlled components provide greater flexibility, predictability, and control, making them ideal for complex forms. Uncontrolled components offer simplicity and less overhead for straightforward scenarios. Choosing the right approach depends on the complexity of your form and the level of control your application requires.