/layout.js @ 1688734135567 [Home]

Virtual DOM

If you View Source of this page, you'll see the javascript at the bottom contains script tags that contain an encoded form of this content:

This is React's new line-based internal data streaming format.

The content is pushed into an array to be processed and split by newlines, which results in the content above, which is the raw React streaming data format.

What Is It?

It's a compact string representation of the virtual DOM, with abbreviations, internal references, and characters with encoded special meanings.

Why is it needed?

Current Mental Model

A few notes about this format

Virtual DOM Detailed View

This is React's internal representation of the current page/DOM structure. If it needs to update the page, it can compare what it wants with what it knows is there, and perform an efficient update to the DOM.

You can see all the visible content on this page within this Virtual DOM.

Virtual DOM Reconciliation

When the page loads, React does a reconciliation between the Virtual DOM that it thinks represents the page, and the actual static DOM that the server returned. If any differences are found, it throws a console error. This is because it won't be able to accurately update the DOM if it doesn't have the correct structure representation. We will explore why this could happen in just a bit.

Integrating Client Components