diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
index 5bad11aae5a27..9537f037e76eb 100644
--- a/fixtures/ssr/src/components/Chrome.js
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -28,12 +28,9 @@ export default class Chrome extends Component {
{
- React.unstable_withSuspenseConfig(
- () => {
- this.setState({theme});
- },
- {timeoutMs: 6000}
- );
+ React.startTransition(() => {
+ this.setState({theme});
+ });
}}
/>
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 1d70475041491..1e6a912651832 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -913,9 +913,8 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hello');
// Render an update with a long timeout.
- React.unstable_withSuspenseConfig(
- () => root.render(),
- {timeoutMs: 5000},
+ React.unstable_startTransition(() =>
+ root.render(),
);
// This shouldn't force the fallback yet.
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index d2de57b588342..7b48d0118bebd 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -771,14 +771,11 @@ function runActTests(label, render, unmount, rerender) {
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
// trigger a suspendy update with a delay
- React.unstable_withSuspenseConfig(
- () => {
- act(() => {
- rerender();
- });
- },
- {timeout: 5000},
- );
+ React.unstable_startTransition(() => {
+ act(() => {
+ rerender();
+ });
+ });
if (label === 'concurrent mode') {
// In Concurrent Mode, refresh transitions delay indefinitely.
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 4614052f50b76..f407bef53fe89 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -389,14 +389,11 @@ describe('SimpleEventPlugin', function() {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 8c709cb593971..e806070e9cca1 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -363,12 +363,9 @@ describe('ReactSuspense', () => {
// Schedule another update. This will have lower priority because it's
// a transition.
- React.unstable_withSuspenseConfig(
- () => {
- root.update();
- },
- {timeoutMs: 10000},
- );
+ React.unstable_startTransition(() => {
+ root.update();
+ });
// Interrupt to trigger a restart.
interrupt();
@@ -465,12 +462,9 @@ describe('ReactSuspense', () => {
// Schedule another update. This will have lower priority because it's
// a transition.
- React.unstable_withSuspenseConfig(
- () => {
- setShouldHideInParent(true);
- },
- {timeoutMs: 10000},
- );
+ React.unstable_startTransition(() => {
+ setShouldHideInParent(true);
+ });
expect(Scheduler).toFlushAndYieldThrough([
// Should have restarted the first update, because of the interruption
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 035bd8bc57537..9ca9f545eb82b 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -959,12 +959,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(Scheduler).toFlushAndYield(['S']);
// Schedule an update, and suspend for up to 5 seconds.
- React.unstable_withSuspenseConfig(
- () => ReactNoop.render(),
- {
- timeoutMs: 5000,
- },
- );
+ React.unstable_startTransition(() => ReactNoop.render());
// The update should suspend.
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([span('S')]);
@@ -976,12 +971,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('S')]);
// Schedule another low priority update.
- React.unstable_withSuspenseConfig(
- () => ReactNoop.render(),
- {
- timeoutMs: 10000,
- },
- );
+ React.unstable_startTransition(() => ReactNoop.render());
// This update should also suspend.
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([span('S')]);
@@ -2282,7 +2272,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
ReactNoop.render();
// Took a long time to render. This is to ensure we get a long suspense time.
- // Could also use something like withSuspenseConfig to simulate this.
+ // Could also use something like startTransition to simulate this.
Scheduler.unstable_advanceTime(1500);
await advanceTimers(1500);
@@ -2330,10 +2320,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
}
// Initial render.
- React.unstable_withSuspenseConfig(
- () => ReactNoop.render(),
- SUSPENSE_CONFIG,
- );
+ React.unstable_startTransition(() => ReactNoop.render());
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
// Only a short time is needed to unsuspend the initial loading state.
@@ -2349,10 +2336,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('A')]);
// Start transition.
- React.unstable_withSuspenseConfig(
- () => ReactNoop.render(),
- SUSPENSE_CONFIG,
- );
+ React.unstable_startTransition(() => ReactNoop.render());
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
Scheduler.unstable_advanceTime(100000);
@@ -2389,10 +2373,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
// Initial render.
await ReactNoop.act(async () => {
- React.unstable_withSuspenseConfig(
- () => transitionToPage('A'),
- SUSPENSE_CONFIG,
- );
+ React.unstable_startTransition(() => transitionToPage('A'));
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
// Only a short time is needed to unsuspend the initial loading state.
@@ -2409,10 +2390,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
// Start transition.
await ReactNoop.act(async () => {
- React.unstable_withSuspenseConfig(
- () => transitionToPage('B'),
- SUSPENSE_CONFIG,
- );
+ React.unstable_startTransition(() => transitionToPage('B'));
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
Scheduler.unstable_advanceTime(100000);
@@ -2452,10 +2430,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
// Initial render.
await ReactNoop.act(async () => {
- React.unstable_withSuspenseConfig(
- () => transitionToPage('A'),
- SUSPENSE_CONFIG,
- );
+ React.unstable_startTransition(() => transitionToPage('A'));
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
// Only a short time is needed to unsuspend the initial loading state.
@@ -2472,10 +2447,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
// Start transition.
await ReactNoop.act(async () => {
- React.unstable_withSuspenseConfig(
- () => transitionToPage('B'),
- SUSPENSE_CONFIG,
- );
+ React.unstable_startTransition(() => transitionToPage('B'));
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
Scheduler.unstable_advanceTime(100000);
@@ -2689,75 +2661,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
// @gate experimental
- it('disables suspense config when nothing is passed to withSuspenseConfig', async () => {
- function App({page}) {
- return (
- }>
-
-
- );
- }
-
- // Initial render.
- ReactNoop.render();
- expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
- Scheduler.unstable_advanceTime(2000);
- await advanceTimers(2000);
- expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
- expect(Scheduler).toFlushAndYield(['A']);
- expect(ReactNoop.getChildren()).toEqual([span('A')]);
-
- // Start transition.
- React.unstable_withSuspenseConfig(
- () => {
- // When we schedule an inner transition without a suspense config
- // so it should only suspend for a short time.
- React.unstable_withSuspenseConfig(() =>
- ReactNoop.render(),
- );
- },
- {timeoutMs: 2000},
- );
-
- expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
- // Suspended
- expect(ReactNoop.getChildren()).toEqual([span('A')]);
- Scheduler.unstable_advanceTime(500);
- await advanceTimers(500);
- // Committed loading state.
- expect(ReactNoop.getChildren()).toEqual([
- hiddenSpan('A'),
- span('Loading...'),
- ]);
-
- Scheduler.unstable_advanceTime(2000);
- await advanceTimers(2000);
- expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
- expect(Scheduler).toFlushAndYield(['B']);
- expect(ReactNoop.getChildren()).toEqual([span('B')]);
-
- React.unstable_withSuspenseConfig(
- () => {
- // First we schedule an inner unrelated update.
- React.unstable_withSuspenseConfig(() =>
- ReactNoop.render(),
- );
- // Then we schedule another transition to a slow page,
- // but at this scope we should suspend for longer.
- Scheduler.unstable_next(() => ReactNoop.render());
- },
- {timeoutMs: 60000},
- );
- expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]', 'Loading...']);
- expect(ReactNoop.getChildren()).toEqual([span('B')]);
- // Event after a large amount of time, we never show a loading state.
- Scheduler.unstable_advanceTime(60000);
- await advanceTimers(60000);
- expect(ReactNoop.getChildren()).toEqual([span('B')]);
- });
-
- // @gate experimental
- it('withSuspenseConfig delay applies when we use an updated avoided boundary', async () => {
+ it('do not show placeholder when updating an avoided boundary with startTransition', async () => {
function App({page}) {
return (
}>
@@ -2780,10 +2684,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
// Start transition.
- React.unstable_withSuspenseConfig(
- () => ReactNoop.render(),
- {timeoutMs: 2000},
- );
+ React.unstable_startTransition(() => ReactNoop.render());
expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
@@ -2806,7 +2707,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
// @gate experimental
- it('withSuspenseConfig delay applies when we use a newly created avoided boundary', async () => {
+ it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {
function App({page}) {
return (
}>
@@ -2830,10 +2731,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
// Start transition.
- React.unstable_withSuspenseConfig(
- () => ReactNoop.render(),
- {timeoutMs: 2000},
- );
+ React.unstable_startTransition(() => ReactNoop.render());
expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
@@ -2992,12 +2890,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop).toMatchRenderedOutput();
// Start transition.
- React.unstable_withSuspenseConfig(
- () => {
- ReactNoop.render();
- },
- {timeoutMs: 2500},
- );
+ React.unstable_startTransition(() => {
+ ReactNoop.render();
+ });
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
Scheduler.unstable_advanceTime(2000);
@@ -3049,12 +2944,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);
// Start transition.
- React.unstable_withSuspenseConfig(
- () => {
- ReactNoop.render();
- },
- {timeoutMs: 5000},
- );
+ React.unstable_startTransition(() => {
+ ReactNoop.render();
+ });
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
Scheduler.unstable_advanceTime(2000);
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 50285328818b7..5f79d3de1fef3 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -50,7 +50,6 @@ export {
startTransition as unstable_startTransition,
SuspenseList,
SuspenseList as unstable_SuspenseList,
- unstable_withSuspenseConfig,
// enableBlocksAPI
block,
block as unstable_block,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index ff00b13333da8..0b5e7efd13505 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -44,7 +44,6 @@ export {
useDeferredValue as unstable_useDeferredValue,
startTransition as unstable_startTransition,
SuspenseList as unstable_SuspenseList,
- unstable_withSuspenseConfig,
// enableBlocksAPI
block as unstable_block,
unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.js b/packages/react/index.js
index ebbb6cf42e6ba..9fd5ccfbf37fb 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -78,7 +78,6 @@ export {
useDeferredValue as unstable_useDeferredValue,
SuspenseList,
SuspenseList as unstable_SuspenseList,
- unstable_withSuspenseConfig,
block,
block as unstable_block,
unstable_LegacyHidden,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index fb2e1dcbef4f2..a5b509460d896 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -49,7 +49,6 @@ export {
startTransition as unstable_startTransition,
SuspenseList,
SuspenseList as unstable_SuspenseList,
- unstable_withSuspenseConfig,
// enableBlocksAPI
block,
block as unstable_block,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index bd737472a5eb8..d5367da328bb5 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -49,7 +49,6 @@ import {
useDeferredValue,
useOpaqueIdentifier,
} from './ReactHooks';
-import {withSuspenseConfig} from './ReactBatchConfig';
import {
createElementWithValidation,
createFactoryWithValidation,
@@ -112,7 +111,6 @@ export {
useDeferredValue,
REACT_SUSPENSE_LIST_TYPE as SuspenseList,
REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
- withSuspenseConfig as unstable_withSuspenseConfig,
// enableBlocksAPI
block,
// enableFundamentalAPI
diff --git a/packages/react/src/ReactBatchConfig.js b/packages/react/src/ReactBatchConfig.js
deleted file mode 100644
index c08dac615486c..0000000000000
--- a/packages/react/src/ReactBatchConfig.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
-
-// This is a copy of startTransition, except if null or undefined is passed,
-// then updates inside the scope are opted-out of the outer transition scope.
-// TODO: Deprecated. Remove in favor of startTransition. Figure out how scopes
-// should nest, and whether we need an API to opt-out nested scopes.
-export function withSuspenseConfig(scope: () => void, config?: mixed) {
- const prevTransition = ReactCurrentBatchConfig.transition;
- ReactCurrentBatchConfig.transition =
- config === undefined || config === null ? 0 : 1;
- try {
- scope();
- } finally {
- ReactCurrentBatchConfig.transition = prevTransition;
- }
-}