Born, growing up.
React's default way of appending itself to a DOM tree considered harmful
For the impatient
Don't do this
<body>
<div id="root"></div>
</body>const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);Do this instead
<body>
<div data-role-react-root></div>
</body>const rootElement = document.querySelector('[data-role-react-root]'),
ReactDOM.render(<App />, rootElement);Or, as Andrew Luca once offered: go even deeper!
const rootElement = document.body.appendChild(document.createElement('div'));
ReactDOM.render(<App />, rootElement);What am I talking about?
If you ever dabbled in React or followed even the most basic of its tutorials, chances are you'll find the following snippet quite familiar:
<!-- here reduced to the bare minimum for simplicity's sake -->
<body>
<div id="root"></div>
</body>const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);This <div id="root"></div> plus the accompanying JavaScript snippet, or one of their variants, are everywhere: tutorials, official docs, tools like Create React App and Nx, online samples... everywhere.
Here's why this is bad to the point of being harmful.
Why is it harmful
In a nutshell:
- Ids and classes are meant to be used for styling purposes:
<div class="some-class"></div>- Even better, don't use ids for styling purposes; use them only for navigation:
<a href="#pricing">Pricing</a>
<!-- more code -->
<section id="pricing">
<!-- awesome pricing table -->
</section>- When you need to add special meaning to HTML, use data attributes:
<div data-special>Such special, much data</div>This separation of concerns (styling via classes, navigation via ids, special meaning via data attributes) helps avoiding some harmful situations you most certainly will find yourself in at some point in your career if you keep using <div id="root"></div> as a React root element.
Harmful situation #1
- Sue creates a new React app.
<div id="root"></div>- Bob hops on the project. The design by Alan has a furry pink border for the main container, meaning Bob needs a selector and lo and behold
#rootis already there.
#root {
border: 2rem furry pink;
}- John the CEO has a vision: furry borders are so 2005! We need to get rid of it!
- John the CEO calls Alan at 5:00 in the morning on a sunday and asks him to change the border ASAP, before his meeting with prospect investors.
- Alan, a designer with good enough CSS skills to get rid of a border, but no JavaScript nor React skill whatsoever, finds the offending CSS rule and deletes it.
Then, in a rare flash of love for his job, Alan the designer searches the codebase for places where id="root" is used.
Alan finds our friend <div id="root"></div>.
Alan thinks he just removed the one and only reason for it to exist, and deletes the whole line.
A sip of coffee, a deploy to production, and the job is done just before the important meeting.
Chaos ensues.
Harmful situation #2
- Sue creates a new React app.
<div id="root"></div>- Bob starts working on the project, but leaves the company with a ton of work still to be done.
- John the CEO decides to be smart and hires a bunch of junior developers from outer space.
- Xyz, one of the junior devs from outer space, works on a new strategic feature and being the junior that she is, she uses
document.getElementById('root')as the base for the strategic feature. - Something happens on Twitter and suddenly "root" is not a good word anymore. Sue changes the HTML:
<div id="react-base"></div>- Sue also changes the React initialization code accordingly:
ReactDOM.render(<App />, document.getElementById('react-base'));- The strategic feature doesn't work anymore.
Chaos ensues.
Conclusions
Both of these harmful situations happened to me multiple times over the last 20 years.
At first, I was Alan or Xyz, more recently I was Bob or Sue.
We had the knowledge to avoid it. Something we learnt during the first months of our careers.
Something some old dude taught us and we forgot.
What's the best practice
So what was the old dude rambling about?
When working with HTML, CSS, and JavaScript:
- For styling purposes, use only classes and element selectors.
- Use ids only for anchors and navigation.
- When you need to get a DOM element via JavaScript, use data attributes.
Or, on the other hand:
- If you see a class, assume it's for styling only.
- If you see an id, assume it's for navigation only.
- If you see a data attribute, assume it's used via JavaScript somehow, somewhere.
Separation of concerns.
Works wonders, if you remember about it.
FAQ and counterpoints
Isn't document.getElementById() supposed to be faster than document.querySelector()?
It is! If you are selecting dozens of elements in a couple seconds.
Is it still faster when selecting one single element while the app is starting up? Probably. Will the user notice? No way.
This is only your opinion, nobody else considers it harmful!
Totally my opinion, coming from my own experience. Wish you'll never have to experience any of the situations you just read about. Take care! 🤞
Do you have any questions / opinions?
Let me know on Twitter!