For an appetizer, a short primer on the regular ol’, very-much-not-virtual DOM.
DOMs are organized in a tree-like structure. I don’t know this from personal experience as I’m only just now learning about all this stuff, but purportedly, trees are easy enough to traverse. The problem lies in the fact that once the tree gets so absolutely humongous big, it isn’t very fast/efficient using the algorithms that exist to traverse that tree, not to mention to “transform” that tree. In fact the state of the art algorithms that exist to do such a thing have a time complexity of O(n³) where ’n’ is the number of elements in the tree.
React and the Virtual DOM, roast beef sandwich and curly fries
The developers of React didn’t invent the Virtual DOM, but it’s how I found out about it.
The Virtual DOM is a representation of the above-mentioned DOM. An abstraction of an abstraction. For every DOM element there is a Virtual DOM element. A lighter weight copy. This copy has the same properties of the DOM element but lacks the power to change what’s on the screen.
If the DOM were a house, the Virtual DOM would be blueprints. If the DOM were your room which you wanted to rearrange, the Virtual DOM would be the crude drawing you made of your room with your furniture to try and figure out where to move things. If the DOM were an apple tree, the Virtual DOM would be a seed (???). If the DOM were a seed, the Virtual DOM would be the ground (ohh…ok…???).
With each call to render, the entire Virtual DOM is recreated. Then React compares this updated version to a snapshot it took right before the update. Wow! Couldn’t even see ’em do it! Then React takes only the changed elements from the comparison and updates the real DOM with them. You might think that that’s a lot of work every time something is updated on a webpage. I felt compelled to say that and I don’t really mean it — probably just what someone else said.
Reconciliation, Oreo bites
Rendering Virtual DOMs quickly and avoiding those O(n³) algorithms, React employs a “diffing” algorithm. This is a “heuristic O(n) algorithm” with two assumptions:
Two elements of different types will produce different trees.
The developer can hint at which child elements may be stable across different renders with a
In React, another part of the Virtual DOM are “fibers”. These are objects included in the Virtual DOM but not representing a part of the user interface. They hold information about the component tree and assists in incremental rendering of the Virtual DOM.
Also, I’d like to say that Arby’s is welcoming back Oreo bites to the menu.
What have I learned?
I am full and happy. A good blog, like an affordable, mostly-meat meal, leaves you feeling sweaty but hopefully satisfied. They both allow you to reflect, to see things in a wider perspective and maybe make connections you wouldn’t have otherwise. In React, the Virtual DOM abstracts away how you manipulate attributes, handle events, or manually change the DOM. It is declarative — when I want the interface to appear some way I declare that to React and it reconciles this with the DOM. When I want a Roast Beef Sandwich with two packets of Horseradish sauce and some curly fries I declare that to Arby’s and they in turn reconcile that with the deli-slicers, bread-bakers, and all the other tools needed to satisfy this request because I can’t be bothered to buy and maintain all of those gadgets. I’m thinking Arby’s.