I am learning about React internals from a talk by Paul O’Shannessy "Building React from scratch"
In "7:29" before explaining how rendering process work, he added these few lines of code which i really couldn't understand
const ROOT_KEY = 'dlthmRootId";
const instancesByRootId = {};
let rootId = 1;
function isRooot(node) {
if(node.dataset[RootKEY]) {
return true
}
else {
return false
}
}
He said that we need to make sure that no roots conflict!
I can't understand this part, what roots to conflict, is this related to server side rendering? or rendering to multiple roots instead of one root node in the app?
React app will be initialized in DOM with the code below.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
What it does is render React component into an element in DOM with the id 'root'.
Therefore, if there is any case where the root element will be duplicated or two React apps attempt to manipulate one single root element, that would be called root 'conflicts'.