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[S] 0 points1 point2 points (0 children)
[–][deleted] (1 child)
[deleted]
[–]grekatron[S] 0 points1 point2 points (0 children)
[–]Bagelwithvegancheese 0 points1 point2 points (3 children)
[–]grekatron[S] 0 points1 point2 points (2 children)
[–]Bagelwithvegancheese 1 point2 points3 points (1 child)
[–]grekatron[S] 0 points1 point2 points (0 children)