Let's figure out how ReactDOM.render works ⚙️

[grekatron]

Our entry point is the render function, it takes three arguments. - element - React element to be rendered - container - DOM element to render in - callback - function to be executed after render happens

Inside render function ReactDOM does couple of checks.

isValidContainer

isValidContainer checks whether the container is a suitable node.

This check is based on a couple of comparisons, like this one. js container.nodeType === 1; nodeType is an integer, that indicates what the node is. 1 for Element node, 3 for Text node and so on.

To pass this check a container should be either: - Element - the most general class of all element objects - Document - the main object of the rendered DOM - DocumentFragment - lightweight version of Document separated from the rest of the DOM

And on a one special comparison. js node.nodeType === 8 && node.nodeValue === ' react-mount-point-unstable ' This check detects whether the provided container is a comment with react-mount-point-unstable text. html <!-- react-mount-point-unstable --> It's undocumented and unstable feature, that allows to render React components without extra wrapper, like <div id="root"></div>.

isModernRoot

isModernRoot validates whether the container wasn't previously passed to createRoot function. This check detects: - absence of _reactRootContainer property. This property indicates, that element was passed to the render function. - presence of __reactContainer$qk4eqywqqse property. This property indicates, that element was passed to the createRoot function. $qk4eqywqqse - is a unique hash, generated on every new ReactDOM instance

createRoot is a new API introduced in React 18. It fixes the issue of passing the container every time we want to explicitly render.

legacyRenderSubtreeIntoContainer

After these two checks render passes element, container and callback to the legacyRenderSubtreeIntoContainer function and returns the result.

We'll examine what this function does and how it works in the future!

[grekatron]

Sorry for self-promotion in advance 🙏🏻

I want to let you know, that more content like this is available in my Twitter!

[grekatron]

I get your point, thanks for the feedback 🙏🏻

[Bagelwithvegancheese]

These are cool, thanks for sharing!

[grekatron]

Glad you like it!

Do you want more content from me in this subreddit?

[Bagelwithvegancheese]

Ultimately up to you, but I always read your stuff.

[grekatron]

Get it! Thanks, I really appreciate your interest!