Forms and Validation – Controlled vs Uncontrolled Components

Introduction

Forms are a fundamental part of web applications. In React, form handling is done using controlled and uncontrolled components. Understanding the difference between these two approaches is essential for building reliable forms and implementing proper validation logic.

Both approaches are valid, but they serve different use cases depending on the complexity of the form and validation requirements.

What Are Controlled Components?

A controlled component is a form element whose value is controlled by React state. Every change in the input updates the component state, and the input value is always driven by that state.

In controlled components:

• React is the single source of truth
• Form data is stored in state
• Validation is easier and more predictable

Example of a Controlled Component

import { useState } from "react";

function ControlledForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;

Explanation:

• Input value comes from state
• onChange updates state
• React controls the form data

Advantages of Controlled Components

• Easy validation
• Real-time form feedback
• Full control over input values
• Predictable behavior
• Better integration with UI logic

Disadvantages of Controlled Components

• More code
• Frequent re-renders
• Slight performance overhead for large forms

What Are Uncontrolled Components?

An uncontrolled component stores its form data in the DOM itself, not in React state. React accesses the value using a reference.

In uncontrolled components:

• DOM manages form data
• React reads values only when needed
• Less code is required

Example of an Uncontrolled Component

import { useRef } from "react";

function UncontrolledForm() {
  const nameRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

Explanation:

• Input value is read from the DOM
• useRef is used to access input value
• React does not manage the state

Advantages of Uncontrolled Components

• Less boilerplate
• Better performance for simple forms
• Easy to integrate with non-React libraries

Disadvantages of Uncontrolled Components

• Harder validation
• Less control over input behavior
• Not suitable for dynamic forms

Controlled vs Uncontrolled Components Comparison

Validation in Controlled Components

Validation is easier in controlled components because form data is already in state.

if (name.trim() === "") {
  setError("Name is required");
}

This allows real-time validation and error handling.

Validation in Uncontrolled Components

Validation happens at submit time.

if (!nameRef.current.value) {
  alert("Name is required");
}

This approach is less flexible.

When to Use Controlled Components

Use controlled components when:

• Form validation is required
• Inputs depend on each other
• You need real-time feedback
• Form logic is complex

When to Use Uncontrolled Components

Use uncontrolled components when:

• Form is simple
• Minimal validation is needed
• Performance is a concern
• Working with legacy code

Common Mistakes in Form Handling

• Mixing controlled and uncontrolled inputs
• Forgetting onChange in controlled inputs
• Overusing uncontrolled forms
• Not validating user input
• Managing large forms inefficiently

Interview Questions and Answers – Controlled vs Uncontrolled

1. What is a controlled component in React?

A component where form data is controlled by React state.

2. What is an uncontrolled component?

A component where form data is handled by the DOM.

3. Which approach is better for validation?

Controlled components.

4. What hook is used for uncontrolled components?

useRef.

5. Do controlled components re-render on every change?

Yes, on every state update.

6. Are uncontrolled components faster?

They can be for simple forms.

7. Can we mix controlled and uncontrolled components?

No, it is not recommended.

8. Which is better for complex forms?

Controlled components.

9. Are controlled components more secure?

They provide better control but security depends on validation.

10. Which approach is recommended by React?

Controlled components for most cases.