Dev helpers: Use React 18 createRoot API

[tyxla]

Proposed Changes

Use React 18's createRoot API for all of the dev helpers.

I'm intentionally targeting only the helpers, since the other instances of ReactDom.render() need to be addressed and tested separately.

Why are these changes being made?

Currently, the dev helpers use the legacy React 17 rendering.
In order to prepare for React 19, we need to fully upgrade to React 18 features.
This PR is a step in that direction.

Testing Instructions

Verify all the dev helpers still work well:

Most of those warnings should also disappear from the console:

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-129587

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-129587&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-129587&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~9 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-main          +147 B  (+0.0%)      +44 B  (+0.0%)
entry-login         +147 B  (+0.0%)      +43 B  (+0.0%)
entry-stepper        +13 B  (+0.0%)       +1 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~102 bytes removed 📉 [gzipped])

name             parsed_size           gzip_size
site-tools            -139 B  (-0.0%)      -31 B  (-0.0%)
site-monitoring       -139 B  (-0.0%)      -31 B  (-0.0%)
site-logs             -139 B  (-0.0%)      -31 B  (-0.0%)
comments              -139 B  (-0.0%)      -37 B  (-0.0%)
checkout              -126 B  (-0.0%)      -34 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~186 bytes removed 📉 [gzipped])

name                                                     parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal                    -126 B  (-0.0%)      -35 B  (-0.0%)
async-load-calypso-blocks-support-article-dialog-dialog       -126 B  (-0.1%)      -31 B  (-0.1%)
async-load-calypso-blocks-reader-full-post                    -126 B  (-0.3%)      -34 B  (-0.3%)
async-load-calypso-blocks-editor-checkout-modal               -126 B  (-0.0%)      -33 B  (-0.0%)
async-load-automattic-help-center                             -126 B  (-0.0%)      -53 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/render-createroot-helpers on your sandbox.

[mirka]

Working as expected 👍