When building modern web apps, performance matters. One of the biggest challenges in frontend development is efficiently updating the UI without slowing down the browser.
React solves this problem using something called the Virtual DOM and updates data without reloading the whole website or app. React updates components that got data updates. Let’s understand it step by step in the simplest way possible.
The Problem: Slow Direct DOM Manipulation
The browser’s Real DOM is not designed for frequent updates.
Every time you change something in the DOM:
- The browser recalculates layout (reflow)
- Repaints elements
- Updates the screen
These operations are expensive, especially when updates happen frequently (like typing, animations, or dynamic UI changes).
Directly manipulating the DOM again and again = performance bottleneck
Solution: Virtual DOM
React introduces the Virtual DOM, which is:
- A lightweight JavaScript representation of the Real DOM
- Stored in memory (fast to work with)
Instead of updating the Real DOM directly, React:
- Works with the Virtual DOM
- Calculates changes efficiently
- Updates only what is necessary in the Real DOM
The Mental Model (Core Idea)
Think of it like this:
React creates a copy of the UI in memory, compares changes, and updates only the differences.
Step-by-Step Lifecycle
Let’s follow what actually happens inside React.
1. Initial Render
- You write JSX
- React converts it into a Virtual DOM tree
- Then creates actual DOM elements
- UI appears on the screen
Flow:
JSX → Virtual DOM → Real DOM → UI
2. State or Props Change
Whenever state or props update:
- React does NOT touch the DOM immediately
- It re-runs the component function
- Prepares for an update
3. New Virtual DOM is Created
After re-render:
- A new Virtual DOM tree is generated
- The old Virtual DOM is still stored
Now React has:
Old Tree vs New Tree
4. Diffing (Reconciliation)
This is the most important step.
React compares:
Old Virtual DOM vs New Virtual DOM
This comparison process is called Reconciliation.
React checks:
- What changed?
- What stayed the same?
- What needs to be updated?
5. Finding Minimal Changes
React doesn’t re-render everything.
Instead, it finds the smallest possible changes:
- Text changed → update only text
- Element added → add only that element
- Element removed → remove only that node
- Lists updated → use keys to track changes
6. Real DOM Update
Finally:
- React applies only the required changes
- Updates the Real DOM efficiently
- Browser updates the UI
Complete Flow Summary
State/Props Change
↓
Component Re-render
↓
New Virtual DOM
↓
Compare with Old Virtual DOM
↓
Find Differences (Diffing)
↓
Update Only Changed Parts
↓
Real DOM Updated
↓
UI Updated
Why This Approach is Fast
React improves performance because:
- Avoids unnecessary DOM updates
- Works in memory first (fast operations)
- Updates only what changed
- Batches multiple updates together
Result:
- Faster apps
- Smooth UI
- Better scalability
Key Takeaways
- Real DOM updates are expensive
- Virtual DOM is a fast, in-memory representation
- React compares old vs new UI (reconciliation)
- Only minimal updates are applied
- This makes React efficient and performant
Conclusion
The Virtual DOM is not magic—it’s a smart optimization strategy.
By avoiding unnecessary DOM operations and updating only what truly changes, React ensures your application stays fast and responsive.
Focus on this mental model:
“React compares UI versions and updates only the difference.”
That’s the core idea behind how React works under the hood.