React JS - How better to add React component to ReactDOM

Question

Is it okay if I insert React component directly in document body by id?

Or it is better to wrap it in DIV?

index.js

ReactDOM.render(
    <Provider store={store()}>
        <App/>
    </Provider>,
    document.querySelector("#root")
)

index.html

<body class="d-flex flex-column h-100" id="root">
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>

No need for an extra div in this case. – px1mp May 28 '20 at 22:22 — px1mp, May 28 '20 at 22:22

score 2 · Accepted Answer · answered May 29 '20 at 03:42

I don't recommend to use body as root of the virtual DOM for 3 reasons:

body normally contains script tags, which might include your React logic. Rerendering body means that you need to take care of all your scripts too, and everytime body needs to be re-rendered, all your scripts need to be reload again, which is not efficient, not to mention side effect of reloading React code (which I don't have any experience to justify). The only way to avoid this is to put all your scripts into header, which is not recommended.
If you need to modify body, e.g. adding classes "modal-open" if you use Bootstrap modal, there are other solutions like using React's hook or an event listener dedicated to updating body.
Normally a web application product does not only use a DOM manipulator script, but also other scripts for business purposes (e.g. Google Analytics, Analytics.js, Google map). There are apps which contains more than 1 React script working independently. In those cases, the script logic should be separated and not coupled together. If there are 2 React scripts, the 2 root nodes should not be nested to avoid unneeded re-render.

score 0 · Answer 2 · answered May 29 '20 at 01:46

0

In my html page I only use one <div id="root">

After that:

ReactDOM.render(element, document.getElementById('root'));

does all the magic.

answered May 29 '20 at 01:46

2 Answers2