What are Controlled Components in React?

In React, a controlled component is a form element whose value is controlled by React state.

That means:

React state becomes the single source of truth
The input value is stored in state
Every change in the input updates the state using onChange

This is the most commonly used approach for handling forms in React interviews and real-world applications.

Basic Example

import { useState } from "react";

function LoginForm() {
  const [username, setUsername] = useState("");

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />

      <p>Entered Username: {username}</p>
    </div>
  );
}

How It Works

Step-by-step flow

User types into the input
onChange event fires
React updates the state using setUsername
Updated state is passed back to the input through value
UI re-renders with latest value

So the input value is always controlled by React.

Why Are Controlled Components Important?

1. Better Control Over Form Data

You can:

validate input
restrict characters
format values
enable/disable buttons
show errors instantly

Example:

if (username.length < 3) {
   showError();
}

2. Easier Form Validation

const [email, setEmail] = useState("");

const isValid = email.includes("@");

3. Predictable Data Flow

React follows one-way data binding, so controlled components fit naturally into React architecture.

Interview Definition

A controlled component is a form element whose value is controlled by React state using the value prop and updated through onChange.

Common Controlled Form Elements

<input>
<textarea>
<select>
checkbox
radio buttons

Controlled Checkbox Example

const [checked, setChecked] = useState(false);

<input
  type="checkbox"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

Controlled vs Uncontrolled Components

Controlled Component	Uncontrolled Component
React controls input value	DOM controls input value
Uses `state`	Uses `ref`
Uses `value` prop	Uses `defaultValue`
Easier validation	Less React code
Preferred in React apps	Used for simple forms

Uncontrolled Component Example

import { useRef } from "react";

function App() {
  const inputRef = useRef();

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Advantages of Controlled Components

Centralized form data
Easy validation
Easier debugging
Better state management
Dynamic UI updates
Predictable behavior

Disadvantages

More code
Re-render happens on every keystroke
Large forms may need optimization

Frequently Asked Interview Questions

1. Why do we prefer controlled components in React?

Because they provide better control, validation, predictable state management, and easier debugging.

2. What is the single source of truth in controlled components?

React state.

3. Which props are mainly used?

value
onChange

For checkboxes:

checked
onChange

4. Can we mix controlled and uncontrolled components?

Technically yes, but React generally recommends consistency because mixing them can cause warnings and unpredictable behavior.

Short Interview Answer

Controlled components are form elements whose values are managed by React state. The input value is controlled using the value prop and updated using the onChange event handler. This gives React full control over the form data and makes validation and state management easier.