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(