What is a React Virtual DOM? What problem does it solve?
Published in
2 min readJun 8, 2020
TLDR;
Manipulating the virtual DOM is like editing a blueprint.
Manipulating an actual DOM is like moving rooms in an actual house.
What problem does React Virtual DOM solve?
- Current day websites require lots of DOM manipulation.
- Why are most, other JavaScripts frameworks slow? JavaScript frameworks update the DOM much more than they have to.
- For example, you have a list than contains 10 items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That is 10 times more work than necessary. Virtual DOM only updates what is necessary.
- Virtual DOM solves the issue of slowness with efficient updating.
What is Virtual DOM?
- In react, for every DOM object, there is a corresponding Virtual DOM object.
- It is a representation of a DOM object. A lightweight copy.
- A virtual DOM object has the same properties as a real DOM object.
- The difference is that it lacks the power to directly change what’s on the screen.
- Manipulating the DOM is slow. Manipulating the virtual DOM is much faster.
