juniorReact

Explain the difference between controlled and uncontrolled inputs in React forms.

Updated Apr 23, 2026

Short answer

In React, controlled inputs are form elements whose value is managed by React state, while uncontrolled inputs are form elements that manage their own state internally in the DOM.

  • Controlled input → React controls the value
  • Uncontrolled input → DOM controls the value

Deep explanation

Controlled Inputs

A controlled input is tied directly to React state. Every change in the input updates state, and React re-renders the UI based on that state.

Example:

JSX
import { useState } from "react";


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


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

How it works:

  • Input value comes from React state
  • Every keystroke updates state
  • React re-renders input with updated value

---

Uncontrolled Inputs…

Unlock with a Pro subscription to view this section.

View pricing

Real-world example

No real-world example available yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

Common mistakes

No common mistakes listed yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

Follow-up questions

No follow-up questions available yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

More React interview questions

View all →