Calling ReactDOM.render() many many times is slow
Do you want to request a feature or report a bug?
What is the current behavior?
ReactDOM.render() many many times seems to have meaningfully worse performance than rendering many elements within a single React root.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
// Edited to add dev/production builds
- React 16 (development): https://jsfiddle.net/Luktwrdm/431/
- React 16 (production): https://jsfiddle.net/Luktwrdm/433/
- React 15 (development): https://jsfiddle.net/Luktwrdm/432/
(These examples are obviously pretty contrived)
What is the expected behavior?
In a perfect world there wouldn't be such a large performance discrepancy between these two approaches.
For context, I'm working with a frontend plugin framework and trying not to expose React (which should ideally be an implementation detail) as part of the plugin interface.
An interface like this requires both the host and the plugin to be implemented with React and to share the same instance of React... but is fast and convenient when they do:
render(props: T): JSX.Element;
An interface like this treats React as an implementation detail, but is less convenient and (more importantly) incurs the above performance problem:
render(props:T, element: HTMLElement): void; unmount(element: HTMLElement): void;
I imagine this use case isn't a high priority for React/ReactDOM, but I'd love to understand a bit better what it is that really causes the performance difference and whether it's likely to ever change.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
- Seems to impact both React 15 & 16 similarly
- I don't think it's browser dependent