React & Modern Frontend (445 Qs)•Part 8: Advanced React Patterns, Portals & Performance (152 - 261)
What is the difference between Real DOM and Virtual DOM?
Below are the main differences between Real DOM and Virtual DOM,
| Real DOM | Virtual DOM |
|---|---|
| Updates are slow | Updates are fast |
| DOM manipulation is very expensive. | DOM manipulation is very easy |
| You can update HTML directly. | You Can’t directly update HTML |
| It causes too much of memory wastage | There is no memory wastage |
| Creates a new DOM if element updates | It updates the JSX if element update |
Practical Code Example
text
// Real DOM vs Virtual DOM:
// Real DOM: Browser C++ data structure; slow layout recalculations on updates
// Virtual DOM: In-memory JavaScript object tree; ultra-fast diffing before minimal real DOM batch