What is React and Why Use It?
Learn what React is, why developers use it, how the Virtual DOM and components work, plus benefits, code examples and common interview questions with answers.
Expected Interview Answer
React is an open-source JavaScript library for building user interfaces from small, reusable components, using a declarative model where you describe what the UI should look like for a given state and React efficiently updates the DOM to match.
Instead of manually manipulating the DOM step by step, you declare components as functions of their props and state. React keeps a lightweight in-memory representation called the Virtual DOM, diffs it against the previous render, and applies only the minimal real-DOM changes. This makes complex, data-driven UIs predictable, composable, and fast to maintain.
- Reusable, composable components
- Declarative code that is easier to reason about
- Efficient DOM updates via reconciliation
- Large ecosystem and strong community support
- Works across web, native, and server rendering
AI Mentor Explanation
React is like a team scoreboard operator who never rewrites the whole board by hand. You just declare the new score state, and the operator figures out which single digit changed and flips only that tile — the same way React diffs the Virtual DOM and updates just the elements that actually changed instead of redrawing everything.
Step-by-Step Explanation
Step 1
Think in components
Break the interface into small, self-contained pieces, each responsible for rendering one part of the UI.
Step 2
Describe UI declaratively
Write each component as a function that returns JSX describing what the UI should look like for the current props and state.
Step 3
Drive UI with state
Store changing data in state and props; when they change, React re-runs the component to produce new output.
Step 4
Let React reconcile
React diffs the new Virtual DOM against the previous one and applies only the minimal set of real DOM updates.
Step 5
Compose the tree
Nest and reuse components to assemble the full application from small building blocks.
What Interviewer Expects
- Definition of React as a UI library, not a full framework
- Understanding of the declarative, component-based model
- Awareness of the Virtual DOM and reconciliation
- Reasons to choose React (reusability, ecosystem, performance)
- A clear real-world example or comparison to imperative DOM code
Common Mistakes
- Calling React a full MVC framework rather than a UI library
- Confusing the Virtual DOM with the shadow DOM
- Saying React manipulates the real DOM directly on every change
- Ignoring the declarative vs imperative distinction
Best Answer (HR Friendly)
“React is a popular JavaScript library from Meta for building website and app interfaces out of small, reusable pieces called components. It lets developers describe what the screen should show for a given set of data, and it updates the page efficiently when that data changes.”
Code Example
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
function App() {
return (
<div>
<Greeting name="Ada" />
<Greeting name="Grace" />
</div>
);
}
export default App;Follow-up Questions
- What is the Virtual DOM and how does reconciliation work?
- How does React differ from a framework like Angular?
- What is the difference between a library and a framework?
- What are the advantages of a declarative UI over an imperative one?
- What is JSX and how does it relate to React?
MCQ Practice
1. React is best described as?
React is a UI library focused on building interfaces from components; it is not a complete framework.
2. What does React use to minimize direct DOM manipulation?
React keeps a Virtual DOM in memory, diffs it against the previous version, and applies only the minimal real DOM changes.
3. React's programming model is primarily?
You declare what the UI should look like for a given state, and React figures out how to update the DOM.
Flash Cards
What is React? — An open-source JavaScript library for building component-based user interfaces declaratively.
Who maintains React? — Meta (formerly Facebook) along with a large open-source community.
What is the Virtual DOM? — An in-memory representation of the UI that React diffs to update the real DOM efficiently.
Declarative vs imperative? — Declarative describes what the UI should be; imperative lists step-by-step DOM instructions.