[DOM] disable legacy mode behind flag (#28468)

Adds a flag to disable legacy mode. Currently this flag is used to cause
legacy mode apis like render and hydrate to throw. This change also
removes render, hydrate, unmountComponentAtNode, and
unstable_renderSubtreeIntoContainer from the experiemntal entrypoint.
Right now for Meta builds this flag is off (legacy mode is still
supported). In OSS builds this flag matches __NEXT_MAJOR__ which means
it currently is on in experiemental. This means that after merging
legacy mode is effectively removed from experimental builds. While this
is a breaking change, experimental builds are not stable and users can
pin to older versions or update their use of react-dom to no longer use
legacy mode APIs.

Author: gnoff

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -227,6 +227,7 @@ describe('Store', () => {
 
     // @reactVersion >= 18.0
     // @reactVersion < 19
+    // @gate !disableLegacyMode
     it('should support mount and update operations for multiple roots (legacy render)', () => {
       const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
@@ -941,6 +942,7 @@ describe('Store', () => {
 
     // @reactVersion >= 18.0
     // @reactVersion < 19
+    // @gate !disableLegacyMode
     it('should support mount and update operations for multiple roots (legacy render)', () => {
       const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
@@ -1469,6 +1471,7 @@ describe('Store', () => {
 
   // @reactVersion >= 18.0
   // @reactVersion < 19
+  // @gate !disableLegacyMode
   it('detects and updates profiling support based on the attached roots (legacy render)', () => {
     const Component = () => null;
 
@@ -1632,6 +1635,7 @@ describe('Store', () => {
 
     // @reactVersion >= 18.0
     // @reactVersion < 19
+    // @gate !disableLegacyMode
     it('should support Lazy components (legacy render)', async () => {
       const container = document.createElement('div');
 
@@ -1702,6 +1706,7 @@ describe('Store', () => {
 
     // @reactVersion >= 18.0
     // @reactVersion < 19
+    // @gate !disableLegacyMode
     it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => {
       const container = document.createElement('div');
 

packages/react-devtools-shared/src/__tests__/storeStressSync-test.js

@@ -36,6 +36,7 @@ describe('StoreStress (Legacy Mode)', () => {
   // It renders different trees that should produce the same output.
   // @reactVersion >= 16.9
   // @reactVersion < 19
+  // @gate !disableLegacyMode
   it('should handle a stress test with different tree operations (Legacy Mode)', () => {
     let setShowX;
     const A = () => 'a';

packages/react-dom/index.experimental.js

@@ -14,11 +14,7 @@ export {
   hydrateRoot,
   findDOMNode,
   flushSync,
-  hydrate,
-  render,
-  unmountComponentAtNode,
   unstable_batchedUpdates,
-  unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus,
   useFormState,

packages/react-dom/src/__tests__/ReactComponent-test.js

@@ -26,6 +26,7 @@ describe('ReactComponent', () => {
     act = require('internal-test-utils').act;
   });
 
+  // @gate !disableLegacyMode
   it('should throw on invalid render targets in legacy roots', () => {
     const container = document.createElement('div');
     // jQuery objects are basically arrays; people often pass them in by mistake
@@ -455,6 +456,7 @@ describe('ReactComponent', () => {
     /* eslint-enable indent */
   });
 
+  // @gate !disableLegacyMode
   it('fires the callback after a component is rendered in legacy roots', () => {
     const callback = jest.fn();
     const container = document.createElement('div');

packages/react-dom/src/__tests__/ReactCompositeComponentState-test.js

@@ -630,6 +630,7 @@ describe('ReactCompositeComponent-state', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('Legacy mode should support setState in componentWillUnmount (#18851)', () => {
     let subscription;
     class A extends React.Component {

packages/react-dom/src/__tests__/ReactDOM-test.js

@@ -164,6 +164,7 @@ describe('ReactDOM', () => {
     expect(dog.className).toBe('bigdog');
   });
 
+  // @gate !disableLegacyMode
   it('throws in render() if the mount callback in legacy roots is not a function', async () => {
     function Foo() {
       this.a = 1;
@@ -216,6 +217,7 @@ describe('ReactDOM', () => {
     );
   });
 
+  // @gate !disableLegacyMode
   it('throws in render() if the update callback in legacy roots is not a function', async () => {
     function Foo() {
       this.a = 1;

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

@@ -332,7 +332,7 @@ describe('ReactDOMComponent', () => {
       });
     });
 
-    it('throws with Temporal-like objects as style values', () => {
+    it('throws with Temporal-like objects as style values', async () => {
       class TemporalLike {
         valueOf() {
           // Throwing here is the behavior of ECMAScript "Temporal" date/time API.
@@ -344,14 +344,17 @@ describe('ReactDOMComponent', () => {
         }
       }
       const style = {fontSize: new TemporalLike()};
-      const div = document.createElement('div');
-      const test = () => ReactDOM.render(<span style={style} />, div);
-      expect(() =>
-        expect(test).toThrowError(new TypeError('prod message')),
-      ).toErrorDev(
-        'Warning: The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
-          ' This value must be coerced to a string before using it here.',
-      );
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      await expect(async () => {
+        await expect(async () => {
+          await act(() => {
+            root.render(<span style={style} />);
+          });
+        }).toErrorDev(
+          'Warning: The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
+            ' This value must be coerced to a string before using it here.',
+        );
+      }).rejects.toThrowError(new TypeError('prod message'));
     });
 
     it('should update styles if initially null', async () => {
@@ -3688,6 +3691,7 @@ describe('ReactDOMComponent', () => {
       expect(typeof portalContainer.onclick).toBe('function');
     });
 
+    // @gate !disableLegacyMode
     it('does not add onclick handler to the React root in legacy mode', () => {
       const container = document.createElement('div');
 

packages/react-dom/src/__tests__/ReactDOMConsoleErrorReportingLegacy-test.js

@@ -55,6 +55,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
   });
 
   describe('ReactDOM.render', () => {
+    // @gate !disableLegacyMode
     it('logs errors during event handlers', async () => {
       spyOnDevAndProd(console, 'error');
 
@@ -156,6 +157,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
+    // @gate !disableLegacyMode
     it('logs render errors without an error boundary', async () => {
       spyOnDevAndProd(console, 'error');
 
@@ -223,6 +225,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
+    // @gate !disableLegacyMode
     it('logs render errors with an error boundary', async () => {
       spyOnDevAndProd(console, 'error');
 
@@ -295,6 +298,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
+    // @gate !disableLegacyMode
     it('logs layout effect errors without an error boundary', async () => {
       spyOnDevAndProd(console, 'error');
 
@@ -365,6 +369,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
+    // @gate !disableLegacyMode
     it('logs layout effect errors with an error boundary', async () => {
       spyOnDevAndProd(console, 'error');
 
@@ -440,6 +445,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
+    // @gate !disableLegacyMode
     it('logs passive effect errors without an error boundary', async () => {
       spyOnDevAndProd(console, 'error');
 
@@ -511,6 +517,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
+    // @gate !disableLegacyMode
     it('logs passive effect errors with an error boundary', async () => {
       spyOnDevAndProd(console, 'error');
 

packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js

@@ -50,6 +50,7 @@ describe('ReactDOMFiberAsync', () => {
     document.body.removeChild(container);
   });
 
+  // @gate !disableLegacyMode
   it('renders synchronously by default in legacy mode', () => {
     const ops = [];
     ReactDOM.render(<div>Hi</div>, container, () => {

packages/react-dom/src/__tests__/ReactDOMHooks-test.js

@@ -35,6 +35,7 @@ describe('ReactDOMHooks', () => {
     document.body.removeChild(container);
   });
 
+  // @gate !disableLegacyMode
   it('can ReactDOM.render() from useEffect', async () => {
     const container2 = document.createElement('div');
     const container3 = document.createElement('div');
@@ -76,6 +77,50 @@ describe('ReactDOMHooks', () => {
     expect(container3.textContent).toBe('6');
   });
 
+  it('can render() from useEffect', async () => {
+    const container2 = document.createElement('div');
+    const container3 = document.createElement('div');
+
+    const root1 = ReactDOMClient.createRoot(container);
+    const root2 = ReactDOMClient.createRoot(container2);
+    const root3 = ReactDOMClient.createRoot(container3);
+
+    function Example1({n}) {
+      React.useEffect(() => {
+        root2.render(<Example2 n={n} />);
+      });
+      return 1 * n;
+    }
+
+    function Example2({n}) {
+      React.useEffect(() => {
+        root3.render(<Example3 n={n} />);
+      });
+      return 2 * n;
+    }
+
+    function Example3({n}) {
+      return 3 * n;
+    }
+
+    await act(() => {
+      root1.render(<Example1 n={1} />);
+    });
+    await waitForAll([]);
+    expect(container.textContent).toBe('1');
+    expect(container2.textContent).toBe('2');
+    expect(container3.textContent).toBe('3');
+
+    await act(() => {
+      root1.render(<Example1 n={2} />);
+    });
+    await waitForAll([]);
+    expect(container.textContent).toBe('2');
+    expect(container2.textContent).toBe('4');
+    expect(container3.textContent).toBe('6');
+  });
+
+  // @gate !disableLegacyMode
   it('should not bail out when an update is scheduled from within an event handler', () => {
     const {createRef, useCallback, useState} = React;