Missing data-reactroot attirbute in React 16

Question

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">
    ...

Answer 1

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.

Answer 2

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.