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

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.