DEV Community

Cover image for React's default way of appending itself to a DOM tree considered harmful

React's default way of appending itself to a DOM tree considered harmful

William Ghelfi on August 24, 2020

For the impatient Don't do this <body> <div id="root"></div> </body> Enter fullscreen m...
Read full post
Collapse
 
amplanetwork profile image
Ampla Network •

html.spec.whatwg.org/multipage/dom...

There is clearly nothing harmful at all. Ids are made to direct targeting a UNIQUE element in the dom. There is nothing in the specification that prevent anyone to use it, especially when scripting.

The way you want to separate CSS from the code is ok, but don't say something is harmfull just without any real materials.

Modifying the production server in the middle of the night for CSS purpose is Harmfull, not targeting Id. This is only your opinion, no real proof of any kind in any official documentation. Your example makes no sense.

No one do that in real life. And if you delete the line ... You delete attribute too.

Collapse
 
iamandrewluca profile image
Andrei Luca • • Edited

This is only your opinion

What you wrote here is only your opinion also ))
Have you ever experienced making a page builder in React? You will be amazed how much hacks you have to do, to make it work. So yes, this use case is valid one and makes sense.

<div data-role-react-root="block-1"></div>
<div data-role-react-root="other-block"></div>
<div data-role-react-root="block-1"></div>
<div data-role-react-root="some-other-block"></div>

<!-- block-1.js -->
<script>
    document.querySelectorAll('[data-role-react-root="block-1"]').forEach(rootElement => {
        const Block1 = () => React.createElement('div', { children: ['my block 1']})
        ReactDOM.render(React.createElement(Block1), rootElement);
    })
</script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
trumbitta profile image
William Ghelfi •

Wow, dude. So much hate.

Collapse
 
gargante profile image
Gargante •

I totally agree, to separate concerns it's a best practice that all of us should follow, for more than one reason. To change or remove something that could be used elsewhere without first look for its usages can do serious damage; separation of concerns puts a limit on it, but also help us to simplify and isolate problems and makes easier to understand the codebase.

However, I wonder: is it possible that there are significant performance differences between getElementById and querySelector that make using the id instead of the data attribute a risk worth taking?

Collapse
 
trumbitta profile image
William Ghelfi • • Edited

Loss of performance is certainly a factor in a JS application where you need to get dozens of elements or more. If that's the case, you should measure then optimize if needed. And an easy optimization is to use ids and getElementById().

The initialization code for a React app is just one querySelector() at the start, tho, and with a simple selector. I don't expect the difference in performance to be perceived by users of the app :)

Collapse
 
iamandrewluca profile image
Andrei Luca • • Edited

Good article!

Go even deeper :D

const rootElement = document.body.appendChild(document.createElement('div'));

ReactDOM.render(<App />, rootElement);
Collapse
 
trumbitta profile image
William Ghelfi •

I'll try this! Nobody in their right mind would touch it :D