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...

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.