Moderate React Question 101 of 226

What is a controlled component versus an uncontrolled component?

MERN Full Stack · Speak this in 60–90 seconds · Faridabad & Delhi NCR

PICTURE THIS: DOM IS A TREE

html

headbody

navmainfooter

Simple meaning

A controlled input takes its value from React state and updates through onChange.

WHY — React instead of guessing?

Why interviewers care about React:

They want a clean

contrast on React, not two memorised paragraphs.

Say what changes for

the developer, then one case where picking wrong hurts.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

STEPS — What happens step by step?

Before you speak the answer, walk the interviewer through these steps:

1
A controlled input takes
its value from React state and updates through onChange.
2
An uncontrolled input keeps
state in the DOM and is read through a ref.
3
Forms in MERN apps
are usually controlled so validation and submit logic stay in one place.
4
Give an example
One tiny concrete case you can say aloud.
5
Common mistake
What juniors usually get wrong.
6
Close
When you pick this over the alternative.

EXAMPLE — See it in action

Here's a short line you can speak, broken into clear beats:

Say this line

“An uncontrolled input keeps state in the DOM and is read through a ref.”

Break into beats

Anuncontrolledinputkeepsstatein

Speaking order

2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Key takeaway

A controlled input takes its value from React state and updates through onChange. An uncontrolled input keeps state in the DOM and is read through a ref.