@@ -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(
@@ -155,7 +154,7 @@ describe('ReactDOMRoot', () => {
it('does not clear existing children', async () => {
container.innerHTML = '
a
b
';
- const root = ReactDOM.createRoot(container);
+ const root = ReactDOM.unstable_createRoot(container);
root.render(
c
@@ -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(
Hi
);
// 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(
@@ -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(Hi);
// 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(Foo);
@@ -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(1);
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()).toWarnDev([
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index a06dca184d177..8a03d03a8bea4 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/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,
diff --git a/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js
index 1b5d690da9ea9..e5f8969ba119a 100644
--- a/packages/react-dom/src/events/__tests__/ChangeEventPlugin-test.internal.js
+++ b/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 = [];
diff --git a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js b/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js
index 64ae22ddd4c98..ad90110818c70 100644
--- a/packages/react-dom/src/events/__tests__/SimpleEventPlugin-test.internal.js
+++ b/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;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 8e1a80ffac8e7..fc0a50083d5d5 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/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):
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric.js b/packages/shared/forks/ReactFeatureFlags.native-fabric.js
index 06d87c3182fd2..62a64ef5bdf7e 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fabric.js
+++ b/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;
diff --git a/packages/shared/forks/ReactFeatureFlags.native.js b/packages/shared/forks/ReactFeatureFlags.native.js
index 1c0ef01928985..d94807d0fcd44 100644
--- a/packages/shared/forks/ReactFeatureFlags.native.js
+++ b/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;
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index d9aa80be570d1..6ae31a7ce54d2 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/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;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e5d4ef7d6b51c..03642454dd8c3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/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;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 5cc50cc07fafb..407a0a662cb38 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/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;