unstable_createRoot

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

@@ -68,12 +68,11 @@ describe('ReactDOMFiberAsync', () => {
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
       container = document.createElement('div');
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-      ReactFeatureFlags.enableCreateRoot = true;
       ReactDOM = require('react-dom');
     });
 
     it('createRoot makes the entire tree async', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       root.render(<div>Hi</div>);
       expect(container.textContent).toEqual('');
       jest.runAllTimers();
@@ -95,7 +94,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       root.render(<Component />);
       expect(container.textContent).toEqual('');
       jest.runAllTimers();

packages/react-dom/src/__tests__/ReactDOMRoot-test.internal.js → packages/react-dom/src/__tests__/ReactDOMRoot-test.js

@@ -66,22 +66,21 @@ describe('ReactDOMRoot', () => {
     };
 
     jest.resetModules();
-    require('shared/ReactFeatureFlags').enableCreateRoot = true;
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
     AsyncMode = React.unstable_AsyncMode;
   });
 
   it('renders children', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     root.render(<div>Hi</div>);
     flush();
     expect(container.textContent).toEqual('Hi');
   });
 
   it('unmounts children', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     root.render(<div>Hi</div>);
     flush();
     expect(container.textContent).toEqual('Hi');
@@ -91,7 +90,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('`root.render` returns a thenable work object', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const work = root.render(<AsyncMode>Hi</AsyncMode>);
     let ops = [];
     work.then(() => {
@@ -109,7 +108,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('resolves `work.then` callback synchronously if the work already committed', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const work = root.render(<AsyncMode>Hi</AsyncMode>);
     flush();
     let ops = [];
@@ -133,7 +132,7 @@ describe('ReactDOMRoot', () => {
     // Does not hydrate by default
     const container1 = document.createElement('div');
     container1.innerHTML = markup;
-    const root1 = ReactDOM.createRoot(container1);
+    const root1 = ReactDOM.unstable_createRoot(container1);
     root1.render(
       <div>
         <span />
@@ -144,7 +143,7 @@ describe('ReactDOMRoot', () => {
     // Accepts `hydrate` option
     const container2 = document.createElement('div');
     container2.innerHTML = markup;
-    const root2 = ReactDOM.createRoot(container2, {hydrate: true});
+    const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true});
     root2.render(
       <div>
         <span />
@@ -155,7 +154,7 @@ describe('ReactDOMRoot', () => {
 
   it('does not clear existing children', async () => {
     container.innerHTML = '<div>a</div><div>b</div>';
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     root.render(
       <div>
         <span>c</span>
@@ -175,7 +174,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('can defer a commit by batching it', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     batch.render(<div>Hi</div>);
     // Hasn't committed yet
@@ -198,7 +197,7 @@ describe('ReactDOMRoot', () => {
       }
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     batch.render(
       <AsyncMode>
@@ -231,7 +230,7 @@ describe('ReactDOMRoot', () => {
       ops.push('Foo');
       return props.children;
     }
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     batch.render(<Foo>Hi</Foo>);
     // Flush all async work.
@@ -249,7 +248,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('can wait for a batch to finish', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     batch.render(<AsyncMode>Foo</AsyncMode>);
 
@@ -271,7 +270,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('`batch.render` returns a thenable work object', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     const work = batch.render('Hi');
     let ops = [];
@@ -290,7 +289,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('can commit an empty batch', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     root.render(<AsyncMode>1</AsyncMode>);
 
     expire(2000);
@@ -307,7 +306,7 @@ describe('ReactDOMRoot', () => {
 
   it('two batches created simultaneously are committed separately', () => {
     // (In other words, they have distinct expiration times)
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch1 = root.createBatch();
     batch1.render(1);
     const batch2 = root.createBatch();
@@ -323,7 +322,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('commits an earlier batch without committing a later batch', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch1 = root.createBatch();
     batch1.render(1);
 
@@ -342,7 +341,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('commits a later batch without committing an earlier batch', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch1 = root.createBatch();
     batch1.render(1);
 
@@ -362,7 +361,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('handles fatal errors triggered by batch.commit()', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOM.unstable_createRoot(container);
     const batch = root.createBatch();
     const InvalidType = undefined;
     expect(() => batch.render(<InvalidType />)).toWarnDev([

packages/react-dom/src/client/ReactDOM.js

@@ -28,7 +28,6 @@ import * as EventPluginHub from 'events/EventPluginHub';
 import * as EventPluginRegistry from 'events/EventPluginRegistry';
 import * as EventPropagators from 'events/EventPropagators';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
-import {enableCreateRoot} from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import * as ReactDOMFrameScheduling from 'shared/ReactDOMFrameScheduling';
 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
@@ -1304,15 +1303,13 @@ type RootOptions = {
   hydrate?: boolean,
 };
 
-if (enableCreateRoot) {
-  ReactDOM.createRoot = function createRoot(
-    container: DOMContainer,
-    options?: RootOptions,
-  ): ReactRoot {
-    const hydrate = options != null && options.hydrate === true;
-    return new ReactRoot(container, true, hydrate);
-  };
-}
+ReactDOM.unstable_createRoot = function createRoot(
+  container: DOMContainer,
+  options?: RootOptions,
+): ReactRoot {
+  const hydrate = options != null && options.hydrate === true;
+  return new ReactRoot(container, true, hydrate);
+};
 
 const foundDevTools = DOMRenderer.injectIntoDevTools({
   findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,

packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js

@@ -452,12 +452,11 @@ describe('ChangeEventPlugin', () => {
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
       ReactFeatureFlags.enableAsyncSubtreeAPI = true;
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-      ReactFeatureFlags.enableCreateRoot = true;
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
       ReactDOM = require('react-dom');
     });
     it('text input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       let input;
 
       let ops = [];
@@ -504,7 +503,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('checkbox input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       let input;
 
       let ops = [];
@@ -566,7 +565,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('textarea', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       let textarea;
 
       let ops = [];
@@ -613,7 +612,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('parent of input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       let input;
 
       let ops = [];
@@ -664,7 +663,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('is async for non-input events', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       let input;
 
       let ops = [];

packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js

@@ -223,13 +223,12 @@ describe('SimpleEventPlugin', function() {
       ReactFeatureFlags = require('shared/ReactFeatureFlags');
       ReactFeatureFlags.enableAsyncSubtreeAPI = true;
       ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-      ReactFeatureFlags.enableCreateRoot = true;
       ReactDOM = require('react-dom');
     });
 
     it('flushes pending interactive work before extracting event handler', () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       document.body.appendChild(container);
 
       let ops = [];
@@ -309,7 +308,7 @@ describe('SimpleEventPlugin', function() {
 
     it('end result of many interactive updates is deterministic', () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOM.unstable_createRoot(container);
       document.body.appendChild(container);
 
       let button;

packages/shared/ReactFeatureFlags.js

@@ -10,7 +10,6 @@
 import invariant from 'fbjs/lib/invariant';
 
 // Exports ReactDOM.createRoot
-export const enableCreateRoot = false;
 export const enableUserTimingAPI = __DEV__;
 
 // Mutating mode (React DOM, React ART, React Native):

packages/shared/forks/ReactFeatureFlags.native-fabric.js

@@ -14,7 +14,6 @@ import typeof * as FabricFeatureFlagsType from './ReactFeatureFlags.native-fabri
 
 export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
-export const enableCreateRoot = false;
 export const enableUserTimingAPI = __DEV__;
 export const enableGetDerivedStateFromCatch = false;
 export const warnAboutDeprecatedLifecycles = false;

packages/shared/forks/ReactFeatureFlags.native.js

@@ -22,7 +22,6 @@ export const {
 } = require('ReactFeatureFlags');
 
 // The rest of the flags are static for better dead code elimination.
-export const enableCreateRoot = false;
 export const enableUserTimingAPI = __DEV__;
 export const enableMutatingReconciler = true;
 export const enableNoopReconciler = false;

packages/shared/forks/ReactFeatureFlags.persistent.js

@@ -14,7 +14,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste
 
 export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
-export const enableCreateRoot = false;
 export const enableUserTimingAPI = __DEV__;
 export const enableGetDerivedStateFromCatch = false;
 export const warnAboutDeprecatedLifecycles = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -14,7 +14,6 @@ import typeof * as PersistentFeatureFlagsType from './ReactFeatureFlags.persiste
 
 export const debugRenderPhaseSideEffects = false;
 export const debugRenderPhaseSideEffectsForStrictMode = false;
-export const enableCreateRoot = false;
 export const enableUserTimingAPI = __DEV__;
 export const enableGetDerivedStateFromCatch = false;
 export const warnAboutDeprecatedLifecycles = false;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -21,7 +21,6 @@ export const {
 } = require('ReactFeatureFlags');
 
 // The rest of the flags are static for better dead code elimination.
-export const enableCreateRoot = true;
 
 // The www bundles only use the mutating reconciler.
 export const enableMutatingReconciler = true;