The Virtual DOM (VDOM) is a conceptual model of the actual DOM (Document Object Model) utilized by libraries such as React and VueJs. It's a lightweight copy of the actual DOM. React uses this virtual DOM to improve performance and efficiency when rendering components. This is because manipulating the actual DOM directly is slow, but manipulating the virtual DOM is considerably faster.
Virtual DOM and React
In React, whenever a component's state changes, React will update the Virtual DOM. Then, React's 'diffing' algorithm compares the updated virtual DOM with a snapshot of the old DOM. This process allows React to understand what changes have been made. React then updates only the parts of the actual DOM that have been modified in the virtual DOM rather than updating the entire DOM every time a single change occurs.
// Example React Component
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<input type='text' value={this.state.value} onChange={this.handleChange.bind(this)} />
);
}
}
Pros and Cons of Virtual DOM
The usage of the Virtual DOM brings a significant improvement in performance because it minimizes the costly operations on the real DOM. However, despite this advantage, the use of Virtual DOM can lead to an increased memory footprint since a copy of the DOM is maintained in memory. But usually, these memory costs are outweighed by the performance benefits.
No Time to Read? Learn on the Go!
By reading this article, you've invested 1.02 minutes of your life into expanding your knowledge and perspectives. Now, imagine learning on-the-go, turning every moment into an opportunity for growth and discovery.
Imagine you have all your toys laid on the floor in a certain way. And then you decide to bring a new toy, rearrange some old ones, or remove some toys. Instead of doing these things on the directly floor, you rely on your imagination to try and see how it would look like. Virtual DOM does the same thing. It is a copy of a place where we draw stuff in JavaScript (Real DOM), and all the changes are first made to the Virtual DOM because it's faster.
Why do we need a Virtual DOM?
Using Virtual DOM makes things quicker. It's like making a plan before you put away your toys. By planning, you figure out the fastest way to rearrange your toys, so you spend less time and energy. Similarly, Virtual DOM finds out the fastest way to make changes and then apply them to the real DOM all at once.
How does the Virtual DOM work?
Virtual DOM works in three steps - just like when you plan to play. First, it creates a plan (or 'snapshot') based on how the current JavaScript looks. Then, when you want to add, move or remove toys (make changes), it creates another snapshot. Lastly, it compares the two snapshots, figures out the quickest way to rearrange toys (make changes) and does it all at once!
No Time to Read? Learn on the Go!
By reading this article, you've invested 1.16 minutes of your life into expanding your knowledge and perspectives. Now, imagine learning on-the-go, turning every moment into an opportunity for growth and discovery.
To learn more about how the Virtual DOM works and how it's utilized in frameworks like React, you may want to understand the core principle of React Components
About author
Roman Y.
Senior Software Engineer at Nike
EXCLUSIVELY
Certain articles only distributed to subscribers through email