diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index 826a72552ab35..0f4a373e164c3 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -246,9 +246,9 @@ describe('StoreStressConcurrent', () => {
// 1. Capture the expected render result.
const snapshots = [];
let container = document.createElement('div');
- // $FlowFixMe
- let root = ReactDOM.createRoot(container);
for (let i = 0; i < steps.length; i++) {
+ // $FlowFixMe
+ const root = ReactDOM.createRoot(container);
act(() => root.render({steps[i]}));
// We snapshot each step once so it doesn't regress.
snapshots.push(print(store));
@@ -320,7 +320,7 @@ describe('StoreStressConcurrent', () => {
for (let j = 0; j < steps.length; j++) {
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() => root.render({steps[i]}));
expect(print(store)).toMatch(snapshots[i]);
act(() => root.render({steps[j]}));
@@ -337,7 +337,7 @@ describe('StoreStressConcurrent', () => {
for (let j = 0; j < steps.length; j++) {
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -408,9 +408,9 @@ describe('StoreStressConcurrent', () => {
// This is the only step where we use Jest snapshots.
const snapshots = [];
let container = document.createElement('div');
- // $FlowFixMe
- let root = ReactDOM.createRoot(container);
for (let i = 0; i < steps.length; i++) {
+ // $FlowFixMe
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -512,6 +512,8 @@ describe('StoreStressConcurrent', () => {
// 2. Verify check Suspense can render same steps as initial fallback content.
for (let i = 0; i < steps.length; i++) {
+ // $FlowFixMe
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -536,7 +538,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -582,7 +584,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -640,7 +642,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -690,7 +692,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -744,7 +746,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -897,9 +899,9 @@ describe('StoreStressConcurrent', () => {
// This is the only step where we use Jest snapshots.
const snapshots = [];
let container = document.createElement('div');
- // $FlowFixMe
- let root = ReactDOM.createRoot(container);
for (let i = 0; i < steps.length; i++) {
+ // $FlowFixMe
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -922,6 +924,8 @@ describe('StoreStressConcurrent', () => {
// which is different from the snapshots above. So we take more snapshots.
const fallbackSnapshots = [];
for (let i = 0; i < steps.length; i++) {
+ // $FlowFixMe
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -1055,7 +1059,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -1107,7 +1111,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -1174,7 +1178,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -1226,7 +1230,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
@@ -1278,7 +1282,7 @@ describe('StoreStressConcurrent', () => {
// Always start with a fresh container and steps[i].
container = document.createElement('div');
// $FlowFixMe
- root = ReactDOM.createRoot(container);
+ const root = ReactDOM.createRoot(container);
act(() =>
root.render(
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 0c264240976ed..c13c2805a5ccd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -14,6 +14,7 @@ let ReactDOM = require('react-dom');
let ReactDOMServer = require('react-dom/server');
let Scheduler = require('scheduler');
let act;
+let useEffect;
describe('ReactDOMRoot', () => {
let container;
@@ -26,6 +27,7 @@ describe('ReactDOMRoot', () => {
ReactDOMServer = require('react-dom/server');
Scheduler = require('scheduler');
act = require('jest-react').act;
+ useEffect = React.useEffect;
});
it('renders children', () => {
@@ -342,4 +344,62 @@ describe('ReactDOMRoot', () => {
});
expect(container.textContent).toEqual('b');
});
+
+ it('unmount is synchronous', async () => {
+ const root = ReactDOM.createRoot(container);
+ await act(async () => {
+ root.render('Hi');
+ });
+ expect(container.textContent).toEqual('Hi');
+
+ await act(async () => {
+ root.unmount();
+ // Should have already unmounted
+ expect(container.textContent).toEqual('');
+ });
+ });
+
+ it('throws if an unmounted root is updated', async () => {
+ const root = ReactDOM.createRoot(container);
+ await act(async () => {
+ root.render('Hi');
+ });
+ expect(container.textContent).toEqual('Hi');
+
+ root.unmount();
+
+ expect(() => root.render("I'm back")).toThrow(
+ 'Cannot update an unmounted root.',
+ );
+ });
+
+ it('warns if root is unmounted inside an effect', async () => {
+ const container1 = document.createElement('div');
+ const root1 = ReactDOM.createRoot(container1);
+ const container2 = document.createElement('div');
+ const root2 = ReactDOM.createRoot(container2);
+
+ function App({step}) {
+ useEffect(() => {
+ if (step === 2) {
+ root2.unmount();
+ }
+ }, [step]);
+ return 'Hi';
+ }
+
+ await act(async () => {
+ root1.render();
+ });
+ expect(container1.textContent).toEqual('Hi');
+
+ expect(() => {
+ ReactDOM.flushSync(() => {
+ root1.render();
+ });
+ }).toErrorDev(
+ 'Attempted to synchronously unmount a root while React was ' +
+ 'already rendering.',
+ );
+ });
});
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index ba062fc3f71e9..1a027d9a1e6a9 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -14,7 +14,7 @@ import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
export type RootType = {
render(children: ReactNodeList): void,
unmount(): void,
- _internalRoot: FiberRoot,
+ _internalRoot: FiberRoot | null,
...
};
@@ -62,17 +62,23 @@ import {
updateContainer,
findHostInstanceWithNoPortals,
registerMutableSourceForHydration,
+ flushSync,
+ isAlreadyRendering,
} from 'react-reconciler/src/ReactFiberReconciler';
import invariant from 'shared/invariant';
import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
-function ReactDOMRoot(internalRoot) {
+function ReactDOMRoot(internalRoot: FiberRoot) {
this._internalRoot = internalRoot;
}
ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
const root = this._internalRoot;
+ if (root === null) {
+ invariant(false, 'Cannot update an unmounted root.');
+ }
+
if (__DEV__) {
if (typeof arguments[1] === 'function') {
console.error(
@@ -109,10 +115,23 @@ ReactDOMRoot.prototype.unmount = function(): void {
}
}
const root = this._internalRoot;
- const container = root.containerInfo;
- updateContainer(null, root, null, () => {
+ if (root !== null) {
+ this._internalRoot = null;
+ const container = root.containerInfo;
+ if (__DEV__) {
+ if (isAlreadyRendering()) {
+ console.error(
+ 'Attempted to synchronously unmount a root while React was already ' +
+ 'rendering. React cannot finish unmounting the root until the ' +
+ 'current render has completed, which may lead to a race condition.',
+ );
+ }
+ }
+ flushSync(() => {
+ updateContainer(null, root, null, null);
+ });
unmarkContainerAsRoot(container);
- });
+ }
};
export function createRoot(
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 1a6afe0233ed1..3206efa41349c 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -396,5 +396,6 @@
"405": "hydrateRoot(...): Target container is not a DOM element.",
"406": "act(...) is not supported in production builds of React.",
"407": "Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.",
- "408": "Missing getServerSnapshot, which is required for server-rendered content."
+ "408": "Missing getServerSnapshot, which is required for server-rendered content.",
+ "409": "Cannot update an unmounted root."
}