build(ui): Enable react concurrent mode for dev (#68673)

static/app/bootstrap/renderDom.tsx

@@ -1,6 +1,8 @@
 import {render} from 'react-dom';
 import {createRoot} from 'react-dom/client';
 
+import {USE_REACT_CONCURRENT_MODE} from 'sentry/constants';
+
 export function renderDom(
   Component: React.ComponentType,
   container: string,
@@ -18,7 +20,8 @@ export function renderDom(
   if (
     (window.__initialData.features as unknown as string[]).includes(
       'organizations:react-concurrent-renderer-enabled'
-    )
+    ) ||
+    USE_REACT_CONCURRENT_MODE
   ) {
     // Enable concurrent rendering
     const root = createRoot(rootEl);

static/app/bootstrap/renderPipelineView.tsx

@@ -1,7 +1,7 @@
 import {render} from 'react-dom';
 import {createRoot} from 'react-dom/client';
 
-import {ROOT_ELEMENT} from 'sentry/constants';
+import {ROOT_ELEMENT, USE_REACT_CONCURRENT_MODE} from 'sentry/constants';
 import type {PipelineInitialData} from 'sentry/types';
 import PipelineView from 'sentry/views/integrationPipeline/pipelineView';
 
@@ -12,7 +12,8 @@ function renderDom(pipelineName: string, props: PipelineInitialData['props']) {
   if (
     (window.__initialData.features as unknown as string[]).includes(
       'organizations:react-concurrent-renderer-enabled'
-    )
+    ) ||
+    USE_REACT_CONCURRENT_MODE
   ) {
     // Enable concurrent rendering
     const root = createRoot(rootEl);

static/app/constants/index.tsx

@@ -370,6 +370,7 @@ export const SPA_DSN = process.env.SPA_DSN;
 export const SENTRY_RELEASE_VERSION = process.env.SENTRY_RELEASE_VERSION;
 export const UI_DEV_ENABLE_PROFILING = process.env.UI_DEV_ENABLE_PROFILING;
 export const USE_REACT_QUERY_DEVTOOL = process.env.USE_REACT_QUERY_DEVTOOL;
+export const USE_REACT_CONCURRENT_MODE = process.env.USE_REACT_CONCURRENT_MODE;
 
 export const DEFAULT_ERROR_JSON = {
   detail: t('Unknown error. Please try again.'),

webpack.config.ts

@@ -63,6 +63,10 @@ const CONTROL_SILO_PORT = env.SENTRY_CONTROL_SILO_PORT;
 // features in the Sentry UI.
 const USE_REACT_QUERY_DEVTOOL = !!env.USE_REACT_QUERY_DEVTOOL;
 
+// Enable react 18 concurrent mode
+const USE_REACT_CONCURRENT_MODE =
+  (DEV_MODE || IS_ACCEPTANCE_TEST) && !env.DISABLE_REACT_CONCURRENT_MODE;
+
 // Environment variables that are used by other tooling and should
 // not be user configurable.
 //
@@ -350,6 +354,7 @@ const appConfig: Configuration = {
         SPA_DSN: JSON.stringify(SENTRY_SPA_DSN),
         SENTRY_RELEASE_VERSION: JSON.stringify(SENTRY_RELEASE_VERSION),
         USE_REACT_QUERY_DEVTOOL: JSON.stringify(USE_REACT_QUERY_DEVTOOL),
+        USE_REACT_CONCURRENT_MODE: JSON.stringify(USE_REACT_CONCURRENT_MODE),
       },
     }),