Controlled vs Uncontrolled Components in React

Introduction

In React, form handling is mainly done using:

• Controlled Components
• Uncontrolled Components

These two approaches define how form data is managed inside React applications.

Controlled components use React state to manage form values, while uncontrolled components rely on the DOM itself.

What are Controlled Components in React?

A controlled component is a form element whose value is managed by React state.

In controlled components:

• React state stores input values
• React controls the form data
• UI updates automatically when state changes

How Controlled Components Work?

1. State stores input value
2. Input value comes from state
3. onChange updates state
4. React re-renders the component

Syntax of Controlled Components

import { useState } from "react";
function App() {
 const [name, setName] = useState("");
 return (
   <input type="text" value={name} onChange={(e) => setName(e.target.value) } />
 );
}

Understanding the Syntax

value={name}

Input value comes from state. onChange updates state whenever input changes.

Example of Controlled Component

import { useState } from "react";
function App() {
 const [email, setEmail] = useState("");
 return (
   <div>
     <input type="email" placeholder="Enter Email" value={email} onChange={(e) => setEmail(e.target.value) } />
     <h2>{email}</h2>
   </div>
 );
}

Output

Advantages of Controlled Components

1. Better Control

React fully controls the input.

2. Easy Validation

Validation becomes simple.

3. Predictable Data Flow

Data is managed centrally.

4. Real-Time Updates

UI updates instantly.

Disadvantages of Controlled Components

1. More Code

Requires state and handlers.

2. Frequent Re-rendering

Large forms may re-render frequently.

What are Uncontrolled Components in React?

Uncontrolled components are form elements managed directly by the DOM instead of React state.

OR

An uncontrolled component stores form data inside the DOM.

React uses ref to access input values.

How Uncontrolled Components Work?

1. DOM stores input values
2. React accesses values using refs
3. No state management required

Syntax of Uncontrolled Components

import { useRef } from "react";
function App() {
 const inputRef = useRef();
 function handleSubmit() {
   alert(inputRef.current.value);
 }
 return (
   <div>
     <input type="text" ref={inputRef} />
     <button onClick={handleSubmit}>
       Submit
     </button>
   </div>
 );
}

Understanding useRef()

useRef() creates a reference to DOM elements.

It helps React directly access HTML elements.

Example of Uncontrolled Component

import { useRef } from "react";
function App() {
 const passwordRef = useRef();
 function showPassword() {
   alert(passwordRef.current.value);
 }
 return (
   <div>
     <input type="password" ref={passwordRef} />
     <button onClick={showPassword}>
       Show Password
     </button>
   </div>
 );
}

Output

Difference Between Controlled and Uncontrolled Components

Controlled Components with Multiple Inputs

Controlled components work very well for large forms.

Example

import { useState } from "react";
function App() {
 const [formData, setFormData] =
   useState({
     name: "",
     email: ""
   });
 function handleChange(event) {
   setFormData({
     ...formData,
     [event.target.name]:
       event.target.value
   });
 }
 return (
   <div>
     <input type="text" name="name" onChange={handleChange} />
     <input type="email" name="email" onChange={handleChange} />
   </div>
 );
}

Real-Life Example of Controlled Components

Suppose you are building:

• Login forms
• Registration pages
• Payment systems
• Search filters

These usually use controlled components because:

• Validation is required
• Real-time updates are needed
• Data handling is easier

Real-Life Example of Uncontrolled Components

Uncontrolled components are useful for:

• Simple forms
• File uploads
• Quick prototypes
• Third-party integrations

Example:

• File input fields

File Input Example

File inputs are usually uncontrolled.

function App() {
 function handleFile(event) {
   console.log(event.target.files[0]);
 }
 return (
   <input type="file" onChange={handleFile} />
 );
}

When to Use Controlled Components?

Use controlled components when:

• Validation is needed
• Real-time updates are required
• Form data is important
• Dynamic forms are used

When to Use Uncontrolled Components?

Use uncontrolled components when:

• Simple input handling is enough
• Minimal React interaction is needed
• Performance optimization is important

Advantages of Controlled Components

Advantages of Uncontrolled Components

Common Mistakes in Controlled Components

1. Forgetting onChange

Wrong:

<input value={name} />

Correct:

<input value={name} onChange={(e) => setName(e.target.value) } />

2. Direct State Mutation

Wrong:

formData.name = "Rahul";

Correct

setFormData({
 ...formData,
 name: "Rahul"
});

Common Mistakes in Uncontrolled Components

1. Forgetting ref

Wrong:

<input type="text" />

Correct:

<input type="text" ref={inputRef} />

2. Accessing ref Before Rendering

Refs become available only after rendering.

Best Practices

• Use controlled components for most forms
• Use uncontrolled components for simple cases
• Keep form logic clean
• Validate user input properly
• Avoid unnecessary re-renders
• Use meaningful input names

Real-World Applications

Controlled and uncontrolled components are used in:

• E-commerce websites
• Banking applications
• Social media platforms
• Booking systems
• Admin dashboards

Examples:

• Login forms
• Payment forms
• Search forms
• Registration systems

Conclusion

Controlled and Uncontrolled Components are important concepts in React form handling. Controlled components use React state to manage form data, while uncontrolled components rely on the DOM.

Controlled components are more commonly used in modern React applications because they provide better control, validation, and predictable data flow.

Continue Learning React