What is the difference between controlled and uncontrolled inputs in React?

Controlled vs uncontrolled inputs in React

Explains controlled inputs, uncontrolled inputs, validation, refs, and when each form approach fits.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

A controlled input gets its value from React state and updates that state through onChange. React is the source of truth. An uncontrolled input keeps its value in the DOM, and React reads it later through a ref or form submission. I would use controlled inputs when the UI needs live validation, dependent fields, formatting, or instant derived state. Uncontrolled inputs can be fine for simple forms or library-managed forms.

Full answer below

Practice focus

Form state ownership, input value control, refs, validation timing, performance, and practical trade-offs.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Forms are where React state becomes user-visible. Controlled and uncontrolled inputs are a common way to test whether a candidate understands state ownership.
A controlled input gets its value from React state and updates that state through onChange. React is the source of truth. An uncontrolled input keeps its value in the DOM, and React reads it later through a ref or form submission. I would use controlled inputs when the UI needs live validation, dependent fields, formatting, or instant derived state. Uncontrolled inputs can be fine for simple forms or library-managed forms.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would not make every field controlled blindly if the form is large and the library already manages uncontrolled state well. The important part is consistency. Mixing approaches without intention can create bugs where displayed values and submitted values drift. Controlled inputs make validation and conditional UI straightforward, but they can cause rerenders on every keystroke. That is usually fine, but large forms may need memoized field components or a form library.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using defaultValue and expecting it to update like value.
Mixing DOM state and React state accidentally.
Treating controlled inputs as the only valid approach.
Forgetting server-side validation after client validation.

What is the difference between controlled and uncontrolled inputs in React?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

Tech stacks

Skill areas

Suggest an improvement