Virtual DOM Trees

A virtual node (vnode) is a plain JavaScript object describing a piece of UI. It holds no DOM. That is the whole trick: an object is cheap enough to throw away and rebuild on every single render.

Writing that by hand is unbearable, so frameworks ship a factory - h in Preact and in this course, React.createElement in React. JSX is sugar that a build tool rewrites into calls to it.

Components are just functions

A vnode's type is normally a tag name string. When it is a function, the vnode is a component: the renderer calls it with props and keeps expanding whatever comes back until only strings and text remain.

Turning a vnode into real DOM

Initial render walks the tree once and builds actual nodes.

Every later render builds a new vtree and diffs it against the previous one, so createDom runs only for the parts that are genuinely new.

Why bother

Reading offsetHeight or setting textContent can force the browser into layout work; allocating and comparing plain objects cannot. So the framework does the expensive thinking in cheap JavaScript and touches the DOM only where the two trees actually disagree.

The exercises in this course run on stdin and stdout, with no browser, so the vnode itself is the whole subject - which is exactly the part that matters.