The React Virtual DOM
During my time at Flatiron School, I remember learning about the three pillars of web programming:
1. Recognize JavaScript Events
2. Manipulate the DOM
3. Communicate with the server
Let’s take a look at the second pillar. Manipulating the DOM is essential, but unfortunately, it can be a little slow. And what’s worse is the fact that many JavaScript frameworks will update the DOM even when they don’t even have to. This is a frustrating problem, so the heroes at React created something called the virtual DOM.
The Virtual DOM
The virtual DOM is much faster than the real DOM. Much faster. So when we try to render a JSX element, every single object gets updated in the virtual DOM…but that’s okay because it’s so much faster! Once that virtual DOM has updated, React compares the virtual DOM with the real DOM and only updates the differences. This process is called “diffing.”
This image portrays the virtual DOM, the browser DOM and the diffing process. The red circles represent the objects that have changed.
Thankfully, all of these details are not the responsibility of the developer, as this happens automatically. The developer needs to update the states of the components and React takes care of the rest.
Can you tell why React is my favorite??
