React concurrent mode can cause UI rendering to block in the sidebar inserter due to pattern previews

[fullofcaffeine]

Description

React 18's concurrent mode has been enabled for Gutenberg at #46467. While it brings many performance benefits, it caused a UI rendering blocking/performance issue in the sidebar inserter due to too many patterns previews documents being rendered through their iframes in parallel.

Before concurrent mode, they rendered sequentially, allowing the browser to render each document in their mini-preview iframes. Now, depending on the search term being looked up in the sidebar inserter, a lot of pattern previews could be rendered at the same time/in batch (due to concurrent mode) - and depending on the browser (from my tests, it affects Firefox more) and system specs - it might cause the UI to slow down in the best case, or outright block / crash the browser in the worst case.

Step-by-step reproduction instructions

You'll need an instance of Wordpress with enough patterns registered and a search term that matches these block patterns. My instance matched ~60 patterns when searching for Image. If you use Gutenberg's wp-env instance, you won't have as many instances of block patterns that match Image, so you'll not notice any significant slowdown (if at all).

I'm using an instance where searching for Image matches 50+ block patterns. Assuming you have access to a similar environment, do the following:

Reproducing the UI bottleneck/slowness:

1. Clone Gutenberg locally and checkout a5102012f9, build and then install/activate it in your WP instance;
2. Open the inserter and search for the term that matches 50-60 patterns. The issue might happen with fewer patterns being rendered, but it might also be system/browser-dependent. To make sure you have the environment closest to the one I used to reproduce it, try to have at least 50 registered block patterns that have actual previews in them. An easy way to do that is to use a Wordpress.com test site, if you have access to one.
3. Immediately after you finish typing the search term in the sidebar inserter's search box, notice how it updates the block and pattern contents below. Try to move the mouse over immediately. Notice how the hover effects render (or don't), try to scroll down/up quickly, hover over other block and pattern buttons, and take note of how the UI is rendering.

Firefox seems to have a much harder time rendering all those iframes at the same time. In my system - which is a bit dated but still quite powerful - Firefox blocked the UI several times, some of it outright crashed, and I had a complete lockdown of my OS (perhaps due to OOM errors caused by a memory leak + Firefox bug?) 3 times, when I had to force-restart the system using the power button :/. The point is that while it might not be too much of an issue for users with beefy and more recent systems with more popular browsers, it might be a real problem for users with older systems and alternative browsers.

Baseline scenario:

1. Clone Gutenberg locally, checkout a5102012f9, and immediately revert it. Build and then install/activate it in your WP instance.
2. Follow steps 2) to 3) from the scenario above and notice how the UI renders significantly faster/better. YMMV.

Screenshots, screen recording, code snippet

Reproducing the issue (Matching 50+ block pattern previews with React concurrent mode enabled):

with-concurrent-mode.mp4

Baseline (Matching 50+ block pattern previews without React concurrent mode):

without-concurrent-mode.mp4

Environment info

• Wordpress 6.1(ish)
• Firefox 110.0b9 (64-bit) and Chrome 109.0.5414.119 (Official Build) (64-bit)
• Ubuntu Linux 20.04 LTS
• Computer specs: i9-10885H CPU @ 2.40GHz w/ 64GB RAM

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ntsekouras]

Fixed by: #48238