React Virtual DOM 101
One thing that makes React special is its Virtual DOM.
In short, what the Virtual DOM allows for is for React to re-render only the affected components on state change, without forcing a re-render of the entire application.
Well…
React’s Virtual DOM is basically just a clone of the real DOM!
The actual DOM can be slow, and we want speed 🏎️
Here’s a quick demo App I set up to illustrate how React changes state:
State will change in this app when you increase or decrease the “more dogs” count, and when we click the “Definitely” button to update totalDogs.
When we trigger a state change, React actually creates a second Virtual DOM, then compares the new Virtual DOM to the old Virtual DOM, and scans for differences.
So say we click +and increment the “girlfriend wants more dogs” count by 1.
React would compare the old Virtual DOM to the new one, and would notice that the “girlfriend wants more dogs” count should be <the-new-count>, and then only re-renders that one part of the application.
In this little example, you can see that every time you add more dogs to my girlfriend’s wish-list, React is only re-rendering the amount of dogs to be added:
And when we click the Definitely button, the application only updates the amount of dogs we now have at the bottom, because that’s all it needs to do:
So in short, React updates only what it needs to be updated in the UI, allowing for faster performance of your application, and this is all made possible by your new best friend — the Virtual DOM.
