Controlled vs Uncontrolled Component in React: Key Differences and When to Use

In React, a controlled component is one where form data is handled by React state, giving you full control over input values. An uncontrolled component manages its own state internally, accessed via refs, making it simpler but less flexible.

Quick Comparison

This table summarizes the main differences between controlled and uncontrolled components in React.

Aspect	Controlled Component	Uncontrolled Component
Data Handling	React state controls input value	DOM manages input value internally
State Source	State lives in React component	State lives in the DOM element
Access to Value	Via React state and props	Via refs to DOM nodes
Use Case	When you need to validate or manipulate input	When you want simple form without much control
Complexity	More code but more control	Less code but less control
Updates	Input updates trigger React re-render	Input updates do not trigger React re-render

Key Differences

Controlled components keep the form data in React state. This means every change in the input updates the state, and React renders the input with the new value. This approach gives you full control over the input, making it easy to validate, format, or reset values.

In contrast, uncontrolled components let the DOM handle the input state internally. React does not update the input value on every change. Instead, you use a ref to get the current value when needed, like on form submission. This makes the code simpler but less flexible.

Controlled components are preferred when you need to respond to user input immediately or enforce rules. Uncontrolled components are useful for quick forms or when you want to avoid writing extra state management code.

Code Comparison

Here is a simple example of a controlled component that updates and displays the input value as you type.

react

import React, { useState } from 'react';

export default function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input
        id="name"
        type="text"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <p>You typed: {value}</p>
    </div>
  );
}

Output

An input box labeled 'Name:' that updates the text below as you type, showing 'You typed: [input]'

Uncontrolled Component Equivalent

This example shows the same input using an uncontrolled component. The input value is accessed only when the button is clicked.

react

import React, { useRef, useState } from 'react';

export default function UncontrolledInput() {
  const inputRef = useRef(null);
  const [value, setValue] = useState('');

  const handleClick = () => {
    setValue(inputRef.current.value);
  };

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input id="name" type="text" ref={inputRef} />
      <button onClick={handleClick}>Show Value</button>
      <p>You typed: {value}</p>
    </div>
  );
}

Output

An input box labeled 'Name:' with a button 'Show Value'; clicking the button displays 'You typed: [input]' below

When to Use Which

Choose controlled components when you need to validate input, enforce formatting, or update UI immediately as the user types. They are best for complex forms where React needs to know the current input state at all times.

Choose uncontrolled components for simple forms or when you want to reduce code complexity. They work well when you only need the input value on form submission and don't need to react to every change.

Key Takeaways

Controlled components keep input state in React, allowing full control and immediate updates.

Uncontrolled components let the DOM manage input state, accessed via refs when needed.

Use controlled components for validation and dynamic UI updates.

Use uncontrolled components for simpler forms with less code.

Controlled components trigger React re-renders on input changes; uncontrolled do not.