Missing data-reactroot attirbute in React 16

user_1125171 0
Viewed 1471

I'm on the process of upgrading some apps to React 16 and noticed that the attribute data-reactroot is gone from the generated root element.

While not super important, seems like we had some code and styles depending on that attribute. I tried to find any place where this change was documented, but couldn't. Is this change normal?

Before v16:

<div id="root">
    <div class="css-1vi9s5j" data-reactroot="">
    ...

After upgrade:

<div id="root">
    <div class="css-1vi9s5j">
    ...
reactjs javascript
2 Answers

Yes, it is intentional. We had some code in React that depended on it but we've since removed it.

I don't recommend to make your app's styling depend on such arguably internal attributes. Use your own CSS classes or data attributes for styling instead.

user_4581930

From the React v15.0 changelog:

We are now using document.createElement instead of setting innerHTML when mounting components. This allows us to get rid of the data-reactid attribute on every node and make the DOM lighter. Using document.createElement is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.

user_69416270
Related