Controlled vs Uncontrolled Forms in React 🚀

Kiran Balaji — Fri, 26 Dec 2025 16:01:02 +0000

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.

Next.js

Kiran Balaji — Sat, 08 Mar 2025 13:25:22 +0000

DEV Community: Kiran Balaji