Bug: performance deteriorates when using ReactDOM.createRoot instead of ReactDom.render for virtual-table.

While experimenting with react-window, I encountered a performance disparity in my project compared to the smooth user experience demonstrated in the react-window documentation examples. Even after building for production, I noticed white flashes when scrolling quickly in my project, whereas the documentation's examples remained consistently smooth.

After conducting several experiments, I successfully identified the root cause: the performance significantly deteriorates when using ReactDOM.createRoot compared to the now deprecated ReactDOM.render.

Here is a video to illustrate the issue:
https://github.com/facebook/react/assets/7544804/0be9ba6f-47e8-4d61-bb6c-e8fef0787776

This issue is not exclusive to react-window; in fact, I first encountered it while developing a toy version of it using function components and hooks (react-window itself is currently implemented using class components).

React version:
Tried with react/react-dom 18.2.0 and react/react-dom 18.3.0-canary-09fbee89d-20231013

Link to code example:
Here are two CodeSandbox examples of the same scenario with only one distinction:

• The first one uses ReactDOM.render: https://codesandbox.io/s/modest-cdn-4jwd6y?file=/index.js
• The second one uses ReactDOM.createRoot: https://codesandbox.io/s/magical-cdn-ggyytv?file=/index.js
  It's worth noting that the issue seems to become more pronounced after building the React app for production. I'm not sure if that's possible directly on codesandbox.

Additionally, I've created two CodeSandbox using my own simplified version of a virtual table, the performance issue is also noticeable in this scenario:

• Using ReactDom.render: https://codesandbox.io/s/sleepy-bardeen-43dd9g?file=/index.js
• Using ReactDom.createRoot: https://codesandbox.io/s/friendly-wilson-qxs4yc?file=/index.js

The current behavior

The performance appears to be worse when using ReactDom.createRoot compared to ReactDom.render

The expected behavior

Using ReactDom.createRoot should give the same performance or better performance than ReactDom.render

Commencez par les paires CodeSandbox liées et comparez ReactDOM.render et ReactDOM.createRoot dans les exemples virtual-table et simplified. Reproduisez le comportement du défilement avec React 18.2.0 et le 18.3.0 canary indiqué, y compris un build de production. C’est terminé lorsque createRoot n’affiche plus la disparité de performances ni les flashes blancs signalés par rapport à render.