Controlled vs Uncontrolled Forms in React 🚀

Forms look simple in React—until they aren’t.

If you’ve ever wondered:

• Why is my input re-rendering so much?
• When should I use useRef instead of useState?
• What do interviewers actually expect here?

This article breaks down controlled vs uncontrolled forms in React with practical use cases, not just definitions.

---

What Is a Controlled Form?

A controlled form is one where React controls the input value.
The input’s value lives in React state, and every change goes through an onChange handler.

Example: Controlled Input

import { useState } from "react";

function ControlledForm() {
  const [email, setEmail] = useState("");

  return (
    <form>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter email"
      />
      <p>Email: {email}</p>
    </form>
  );
}

✅ Pros of Controlled Forms

• Easy validation
• Instant UI updates
• Predictable behavior
• Required for complex logic

❌ Cons of Controlled Forms

• More boilerplate
• Re-renders on every keystroke
• Can hurt performance in large forms

---

What Is an Uncontrolled Form?

An uncontrolled form lets the DOM handle the input state.
React accesses the value only when needed, using a ref.

Example: Uncontrolled Input

import { useRef } from "react";

function UncontrolledForm() {
  const emailRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log(emailRef.current?.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" ref={emailRef} placeholder="Enter email" />
      <button type="submit">Submit</button>
    </form>
  );
}

✅ Pros of Uncontrolled Forms

• Better performance
• Less code
• Closer to native HTML
• Great for simple forms

❌ Cons of Uncontrolled Forms

• Harder validation
• No instant UI feedback
• Not ideal for dynamic logic

---

Controlled vs Uncontrolled: Side-by-Side

Feature	Controlled	Uncontrolled
State location	React	DOM
Re-renders	Every change	On submit
Validation	Easy	Hard
Performance	Can be slower	Faster
Best for	Complex forms	Simple forms

---

Which One Should You Use?

Use Controlled Forms when:

• You need real-time validation
• UI depends on input values
• You’re building dashboards, admin panels
• You’re using form libraries (Formik, React Hook Form)

Use Uncontrolled Forms when:

• Simple forms
• Performance-sensitive inputs
• One-time submission
• Legacy HTML forms

---

Final Thoughts

• Start simple → uncontrolled
• Add complexity → controlled
• Don’t blindly control everything

React gives you choices—good engineers know when to use each.