mediumFrontend

What is the difference between controlled and uncontrolled components?

Q: What is the difference between controlled and uncontrolled components?

**Core concept (TL;DR).** In a **controlled** component, React state is the single source of truth for a form input — you set its value and update state in onChange . In an **uncontrolled** component, the **DOM** holds the value and you read it when needed via a ref (with an optional defaultValue ). React state vs the DOM as source of truth controlled

778 views

Understand the problem

Differentiate between controlled and uncontrolled components in React forms and discuss their use cases.

formscontrolled componentsuncontrolled componentsstate

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Controlled and uncontrolled side by side

import { useState, useRef } from "react";

export default function App() {
  const [name, setName] = useState("");      // controlled
  const ageRef = useRef(null);               // uncontrolled

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="name (controlled)" />
      <input ref={ageRef} defaultValue="18" placeholder="age (uncontrolled)" />
      <button onClick={() => alert(name + " / " + ageRef.current.value)}>Submit</button>
      <p>Live name: {name}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you fetch data in React?

What is the difference between useMemo and useCallback?