This content originally appeared on DEV Community and was authored by LaibaAbbas
Handling forms is one of the most important parts of building modern web applications. Whether it’s a login screen, a signup form, or a checkout page, forms are the primary way users interact with your application.
Controlled Components
Uncontrolled Components
At first, both approaches might look similar — they both render inputs and capture data. But under the hood, they differ significantly in how they manage values, validation, and reactivity.
Choosing the right approach can impact performance, code complexity, and maintainability.
Table of Contents
Introduction: Why Forms Matter in React
What Are Controlled Components
Concept & How They Work
Detailed Example with Code
Pros & Cons
What Are Uncontrolled Components?
Concept & How They Work
Detailed Example with Code
Pros & Cons
Controlled vs Uncontrolled — A Side-by-Side Comparison (with real-world scenarios)
Advanced Use Cases
Hybrid Forms (Mixing Controlled & Uncontrolled)
Performance Considerations
Handling Large/Complex Forms
Best Practices for React Forms
Conclusion: Which Should You Choose?
1. Introduction: Why Forms Matter in React
Forms are the backbone of user interaction in web apps:
- Users log in with forms.
- They register using forms.
- They order products, leave reviews, or send feedback — all through forms.
In plain HTML/JavaScript, the browser handles form data internally. But React is different — it needs to decide how data flows:
- Should React fully control the input values via state? (Controlled)
- Or should the browser DOM manage values, and React only read them when necessary? (Uncontrolled)
2. What Are Controlled Components?
A controlled component is a form element whose value is fully managed by React state.
Instead of the input storing its own data, React’s useState (or other state tools) acts as the single source of truth.
Every keystroke updates the state, and the input re-renders with the new value.
Example: Controlled Component
import React, { useState } from "react";
function ControlledForm() {
const [email, setEmail] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted Email: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<label>Email: </label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}
How It Works (Diagram)
User Input → onChange → React State (setEmail) → Re-render → Input value updated
Here, React is always in control of the input value.
Pros of Controlled Components
- Predictable: Data lives in React state, making debugging easier.
- Validation: Great for real-time validation (e.g., show error if email is invalid).
- Dynamic UI: Useful for enabling/disabling buttons or showing conditional elements.
- Single Source of Truth: All input values are stored in one place (state).
Cons of Controlled Components
More boilerplate: You need value and onChange for every field.- Performance overhead: Every keystroke triggers a re-render.
3. What Are Uncontrolled Components?
An uncontrolled component is a form element where the browser DOM manages the input value.
Instead of React holding state, we access the value using ref.
Example: Uncontrolled Component
import React, { useRef } from "react";
function UncontrolledForm() {
const emailRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted Email: ${emailRef.current.value}`);
};
return (
<form onSubmit={handleSubmit}>
<label>Email: </label>
<input type="email" ref={emailRef} />
<button type="submit">Submit</button>
</form>
);
}
How It Works (Diagram)
User Input → DOM stores value → React reads value via ref when needed
Here, React does not control the value — the DOM does.
Pros of Uncontrolled Components
- Less code: No need for useState or onChange.
- Performance: Fewer re-renders since React doesn’t update on each keystroke.
- Simple: Great for quick forms where validation isn’t needed.
Cons of Uncontrolled Components
- Limited validation: Hard to validate inputs on-the-fly.
- Less predictable: React doesn’t always know the current value.
- Not scalable: Difficult to use for complex forms.
4. Controlled vs Uncontrolled — Side-by-Side
Instead of a table, let’s compare in plain words:
– Data Handling:
Controlled → Managed by React state.
Uncontrolled → Managed by the DOM.
– Best For:
Controlled → Dynamic forms, validation, conditional rendering.
Uncontrolled → Simple forms, quick inputs, performance-critical apps.
– Pros:
Controlled → Predictable, testable, flexible.
Uncontrolled → Simpler, less code, fewer re-renders.
– Cons:
Controlled → More boilerplate, more updates.
Uncontrolled → Less control, tricky validation.
5. Advanced Use Cases
Hybrid Forms (Mixing Controlled & Uncontrolled)
Some fields (like passwords or emails) require validation — use controlled.
Other fields (like comments or optional notes) can be uncontrolled to reduce overhead.
This balance helps with performance + maintainability.
Performance Considerations
- Small forms→ Controlled works fine.
- Large forms with hundreds of fields → Uncontrolled (or libraries) may perform better.
- Many modern libraries (like React Hook Form) use uncontrolled inputs internally for performance.
Handling Large/Complex Forms
Instead of manually writing logic, use libraries:
- Formik→ Controlled, state-driven.
- React Hook Form → Uncontrolled, ref-driven. They provide built-in validation, error handling, and scalability.
6. Best Practices for React Forms
- Use controlled inputs for validation, conditional UI, and dynamic updates.
- Use uncontrolled inputs for simple, fast, one-off forms.
- For production-scale apps, use libraries like Formik or React Hook Form.
- Keep user experience first — a smooth, responsive form matters more than the internal approach.
7. Conclusion: Which Should You Choose?
Both approaches have their place:
- Controlled →More control, more code.
- Uncontrolled → Simpler, less flexible.
For most apps, controlled components are the safer default choice. But don’t hesitate to use uncontrolled inputs when performance or simplicity is more important.
Final Thoughts
React gives developers flexibility in form handling. The key is knowing when to take full control (validation-heavy forms) and when to let the DOM handle things (simple inputs).
Which do you prefer in your React projects: Controlled or Uncontrolled?
Let’s discuss in the comments!
This content originally appeared on DEV Community and was authored by LaibaAbbas