I haven't looked yet but my first question is whether the difference is significant in production mode. The fiddles you're showing are running in development mode.

From what I've seen the difference is similar in production mode, you just start to really see it at higher element counts.

I've played around a little trying to understand how different usage patters impact it. Frequency of updates which require a DOM change, for example, or updates vs lots of mounting & unmounting components. So far I haven't really isolated anything particularly useful.

Calling ReactDOM.render() many many times seems to have meaningfully worse performance than rendering many elements within a single React root.

Not sure if I understand React under the hood correctly, but let's think about it.
When you call ReactDOM.render you need to destroy/replace contents of the target node.
Meanwhile, if you use a single root then Virtual DOM will take care of DOM operations.

We know that DOM mutations are pretty (very?) expensive.

So.. I wouldn't be surprised.

When you call ReactDOM.render you need to destroy/replace contents of the target node.

Is this actually true? My understanding is that that's actually not the case. With the repro examples what's actually being rendered is the same in either case way so the number of DOM mutations don't have to be wildly different.

That said, I can understand some overhead for each root and how many roots might make batching / scheduling worse -- I just don't know enough about the guts of React's implementation to fully explain it.

There shouldn't be a difference in DOM mutations.

I fixed the biggest difference that jumped out at me in #13335.

There's some other differences in DEV (e.g. in React 15 we don't emit perf measurements by default, but in React 16 we do, and they have a fixed cost). But in production it should get better in the next patch release that includes #13335 (presumably 16.4.3 or 16.5.0).

Note in general though we don't recommend using many roots when it's avoidable. It's supported of course but it makes React's job more difficult. As far as I can see, if you use createPortal() in the render method instead of having many ReactDOM.render() calls, the performance significantly improves even in the version of React that's currently published. In general, I think your goal of abstracting away React can make it more difficult for you to benefit from React-specific optimizations like time slicing in the future — so that's another thing to consider.

Thanks for the repro case!

@gaearon

if you use createPortal() in the render method instead of having many ReactDOM.render() calls

If so, why in the React tests we use calling the ReactNoop.render or ReactDOM.render many times, should we use other way to test such as setState in the root component?

The difference is not significant enough to matter in tests.