Building Forms in React: Controlled vs Uncontrolled Components

Forms are a core part of most web applications—whether it's user login, profile updates, or complex multi-step workflows. In React, there are two main ways to handle form inputs: controlled and uncontrolled components.

Understanding the difference is key to writing predictable and maintainable form logic. Let’s dive in.

---

🎯 What’s the Difference?

✅ Controlled Components

In controlled components, form data is handled by React state. The input's value is tied to state via useState, and any change is updated through an onChange handler.

Example:

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

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <input type="text" value={name} onChange={handleChange} />
  );
}

Pros:

• State is the single source of truth.

• Easier validation, conditional rendering, and dynamic updates.

• Integrates well with complex logic and controlled UIs.

Cons:

• Slightly more code.

• Can lead to more re-renders for large forms.

---

🆓 Uncontrolled Components

In uncontrolled components, form data is handled by the DOM itself, and you access values using refs when needed.

Example:

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

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

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

Pros:

• Less code and fewer re-renders.

• Great for simple forms or one-time input reads (e.g. file uploads).

Cons:

• Harder to track input changes.

• Validation and real-time updates are more cumbersome.

---

🛠 When to Use Which?

---

🧰 Best Practices

• Use controlled components for most cases—especially when your form is dynamic or tied to app state.

• Use uncontrolled components for quick forms, third-party integrations, or file uploads.

• Combine both if needed (e.g. use refs for file inputs inside a controlled form).

---

🔚 Conclusion

Controlled and uncontrolled components both have their place in React. Controlled components offer precision and control, while uncontrolled ones give you simplicity and performance when needed.

When in doubt, start with controlled—React state makes your form predictable, testable, and flexible.

Happy form building! 📝⚛️

---