Concept questionEasy~5 minReact Components & State / 2 of 8

Interview question

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.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would consider accessibility and recovery. Invalid fields need labels, described-by relationships, and clear messages whether the input is controlled or not. Server validation still wins after submit. For complex forms, I would choose a pattern that supports dirty state, touched state, reset, default values from the server, and conflict recovery. The design should also handle browser autofill and password managers, which can expose weaknesses in overly custom input handling.

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.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot define the source of truth for an input.
No answer for default values or reset behavior.
Live validation depends on stale DOM reads.
Accessibility is ignored for validation messages.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When would uncontrolled inputs be acceptable?
How would browser autofill affect the form?
How does this connect to API validation errors?

Continue the section

Next in React Components & State: Derived State

Step 3 of 8

Avoid duplicated derived state in React

Opening drill

Concept questionEasy~5 minReact Components & State / 2 of 8

Interview question

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

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.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would consider accessibility and recovery. Invalid fields need labels, described-by relationships, and clear messages whether the input is controlled or not. Server validation still wins after submit. For complex forms, I would choose a pattern that supports dirty state, touched state, reset, default values from the server, and conflict recovery. The design should also handle browser autofill and password managers, which can expose weaknesses in overly custom input handling.

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.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot define the source of truth for an input.
No answer for default values or reset behavior.
Live validation depends on stale DOM reads.
Accessibility is ignored for validation messages.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When would uncontrolled inputs be acceptable?
How would browser autofill affect the form?
How does this connect to API validation errors?

Continue the section

Next in React Components & State: Derived State

Step 3 of 8

Avoid duplicated derived state in React

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 the section

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 the section