@samitouri / QOS-React-2 / commits / 1f38dcff67

Remove withSuspenseConfig (#19724)

Removes `withSuspenseConfig` and migrates relevant tests to `startTransition` instead. We only had one caller in www, which I've removed.

Andrew Clark committed Aug 31, 2020 at 11:16 UTC 1f38dcff67d12828be771403e183652f5e93909a

12 files changed +41 -200

fixtures/ssr/src/components/Chrome.js

+3 -6

@@ -28,12 +28,9 @@ export default class Chrome extends Component {

28 <div>

29 <ThemeToggleButton

30 onChange={theme => {

31 - React.unstable_withSuspenseConfig(

32 - () => {

33 - this.setState({theme});

34 - },

35 - {timeoutMs: 6000}

36 - );

31 + React.startTransition(() => {

32 + this.setState({theme});

33 + });

34 }}

35 />

36 </div>

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

+2 -3

@@ -913,9 +913,8 @@ describe('ReactDOMServerPartialHydration', () => {

913 expect(container.textContent).toBe('Hello');

914

915 // Render an update with a long timeout.

916 - React.unstable_withSuspenseConfig(

917 - () => root.render(<App text="Hi" className="hi" />),

918 - {timeoutMs: 5000},

916 + React.unstable_startTransition(() =>

917 + root.render(<App text="Hi" className="hi" />),

918 );

919

920 // This shouldn't force the fallback yet.

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

+5 -8

@@ -771,14 +771,11 @@ function runActTests(label, render, unmount, rerender) {

771 expect(document.querySelector('[data-test-id=spinner]')).toBeNull();

772

773 // trigger a suspendy update with a delay

774 - React.unstable_withSuspenseConfig(

775 - () => {

776 - act(() => {

777 - rerender(<App suspend={true} />);

778 - });

779 - },

780 - {timeout: 5000},

781 - );

774 + React.unstable_startTransition(() => {

775 + act(() => {

776 + rerender(<App suspend={true} />);

777 + });

778 + });

779

780 if (label === 'concurrent mode') {

781 // In Concurrent Mode, refresh transitions delay indefinitely.

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

+5 -8

@@ -389,14 +389,11 @@ describe('SimpleEventPlugin', function() {

389 <button

390 ref={el => (button = el)}

391 onClick={() => {

392 - React.unstable_withSuspenseConfig(

393 - () => {

394 - this.setState(state => ({

395 - lowPriCount: state.lowPriCount + 1,

396 - }));

397 - },

398 - {timeoutMs: 5000},

399 - );

392 + React.unstable_startTransition(() => {

393 + this.setState(state => ({

394 + lowPriCount: state.lowPriCount + 1,

395 + }));

396 + });

397 }}>

398 {text}

399 </button>

packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

+6 -12

@@ -363,12 +363,9 @@ describe('ReactSuspense', () => {

363

364 // Schedule another update. This will have lower priority because it's

365 // a transition.

366 - React.unstable_withSuspenseConfig(

367 - () => {

368 - root.update(<App shouldSuspend={false} step={2} />);

369 - },

370 - {timeoutMs: 10000},

371 - );

366 + React.unstable_startTransition(() => {

367 + root.update(<App shouldSuspend={false} step={2} />);

368 + });

369

370 // Interrupt to trigger a restart.

371 interrupt();

@@ -465,12 +462,9 @@ describe('ReactSuspense', () => {

462

463 // Schedule another update. This will have lower priority because it's

464 // a transition.

468 - React.unstable_withSuspenseConfig(

469 - () => {

470 - setShouldHideInParent(true);

471 - },

472 - {timeoutMs: 10000},

473 - );

465 + React.unstable_startTransition(() => {

466 + setShouldHideInParent(true);

467 + });

468

469 expect(Scheduler).toFlushAndYieldThrough([

470 // Should have restarted the first update, because of the interruption

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js

+20 -132

@@ -959,12 +959,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

959 expect(Scheduler).toFlushAndYield(['S']);

960

961 // Schedule an update, and suspend for up to 5 seconds.

962 - React.unstable_withSuspenseConfig(

963 - () => ReactNoop.render(<App text="A" />),

964 - {

965 - timeoutMs: 5000,

966 - },

967 - );

962 + React.unstable_startTransition(() => ReactNoop.render(<App text="A" />));

963 // The update should suspend.

964 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

965 expect(ReactNoop.getChildren()).toEqual([span('S')]);

@@ -976,12 +971,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

971 expect(ReactNoop.getChildren()).toEqual([span('S')]);

972

973 // Schedule another low priority update.

979 - React.unstable_withSuspenseConfig(

980 - () => ReactNoop.render(<App text="B" />),

981 - {

982 - timeoutMs: 10000,

983 - },

984 - );

974 + React.unstable_startTransition(() => ReactNoop.render(<App text="B" />));

975 // This update should also suspend.

976 expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);

977 expect(ReactNoop.getChildren()).toEqual([span('S')]);

@@ -2282,7 +2272,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2272 ReactNoop.render(<Foo renderContent={1} />);

2273

2274 // Took a long time to render. This is to ensure we get a long suspense time.

2285 - // Could also use something like withSuspenseConfig to simulate this.

2275 + // Could also use something like startTransition to simulate this.

2276 Scheduler.unstable_advanceTime(1500);

2277 await advanceTimers(1500);

2278

@@ -2314,11 +2304,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2304 expect(ReactNoop.getChildren()).toEqual([span('Loading A...')]);

2305 });

2306

2317 - describe('delays transitions when there a suspense config is supplied', () => {

2318 - const SUSPENSE_CONFIG = {

2319 - timeoutMs: 2000,

2320 - };

2321 -

2307 + describe('startTransition', () => {

2308 // @gate experimental

2309 it('top level render', async () => {

2310 function App({page}) {

@@ -2330,10 +2316,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2316 }

2317

2318 // Initial render.

2333 - React.unstable_withSuspenseConfig(

2334 - () => ReactNoop.render(<App page="A" />),

2335 - SUSPENSE_CONFIG,

2336 - );

2319 + React.unstable_startTransition(() => ReactNoop.render(<App page="A" />));

2320

2321 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

2322 // Only a short time is needed to unsuspend the initial loading state.

@@ -2349,10 +2332,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2332 expect(ReactNoop.getChildren()).toEqual([span('A')]);

2333

2334 // Start transition.

2352 - React.unstable_withSuspenseConfig(

2353 - () => ReactNoop.render(<App page="B" />),

2354 - SUSPENSE_CONFIG,

2355 - );

2335 + React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));

2336

2337 expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);

2338 Scheduler.unstable_advanceTime(100000);

@@ -2389,10 +2369,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2369

2370 // Initial render.

2371 await ReactNoop.act(async () => {

2392 - React.unstable_withSuspenseConfig(

2393 - () => transitionToPage('A'),

2394 - SUSPENSE_CONFIG,

2395 - );

2372 + React.unstable_startTransition(() => transitionToPage('A'));

2373

2374 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

2375 // Only a short time is needed to unsuspend the initial loading state.

@@ -2409,10 +2386,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2386

2387 // Start transition.

2388 await ReactNoop.act(async () => {

2412 - React.unstable_withSuspenseConfig(

2413 - () => transitionToPage('B'),

2414 - SUSPENSE_CONFIG,

2415 - );

2389 + React.unstable_startTransition(() => transitionToPage('B'));

2390

2391 expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);

2392 Scheduler.unstable_advanceTime(100000);

@@ -2452,10 +2426,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2426

2427 // Initial render.

2428 await ReactNoop.act(async () => {

2455 - React.unstable_withSuspenseConfig(

2456 - () => transitionToPage('A'),

2457 - SUSPENSE_CONFIG,

2458 - );

2429 + React.unstable_startTransition(() => transitionToPage('A'));

2430

2431 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

2432 // Only a short time is needed to unsuspend the initial loading state.

@@ -2472,10 +2443,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2443

2444 // Start transition.

2445 await ReactNoop.act(async () => {

2475 - React.unstable_withSuspenseConfig(

2476 - () => transitionToPage('B'),

2477 - SUSPENSE_CONFIG,

2478 - );

2446 + React.unstable_startTransition(() => transitionToPage('B'));

2447

2448 expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);

2449 Scheduler.unstable_advanceTime(100000);

@@ -2689,75 +2657,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2657 });

2658

2659 // @gate experimental

2692 - it('disables suspense config when nothing is passed to withSuspenseConfig', async () => {

2693 - function App({page}) {

2694 - return (

2695 - <Suspense fallback={<Text text="Loading..." />}>

2696 - <AsyncText text={page} ms={2000} />

2697 - </Suspense>

2698 - );

2699 - }

2700 -

2701 - // Initial render.

2702 - ReactNoop.render(<App page="A" />);

2703 - expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

2704 - Scheduler.unstable_advanceTime(2000);

2705 - await advanceTimers(2000);

2706 - expect(Scheduler).toHaveYielded(['Promise resolved [A]']);

2707 - expect(Scheduler).toFlushAndYield(['A']);

2708 - expect(ReactNoop.getChildren()).toEqual([span('A')]);

2709 -

2710 - // Start transition.

2711 - React.unstable_withSuspenseConfig(

2712 - () => {

2713 - // When we schedule an inner transition without a suspense config

2714 - // so it should only suspend for a short time.

2715 - React.unstable_withSuspenseConfig(() =>

2716 - ReactNoop.render(<App page="B" />),

2717 - );

2718 - },

2719 - {timeoutMs: 2000},

2720 - );

2721 -

2722 - expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);

2723 - // Suspended

2724 - expect(ReactNoop.getChildren()).toEqual([span('A')]);

2725 - Scheduler.unstable_advanceTime(500);

2726 - await advanceTimers(500);

2727 - // Committed loading state.

2728 - expect(ReactNoop.getChildren()).toEqual([

2729 - hiddenSpan('A'),

2730 - span('Loading...'),

2731 - ]);

2732 -

2733 - Scheduler.unstable_advanceTime(2000);

2734 - await advanceTimers(2000);

2735 - expect(Scheduler).toHaveYielded(['Promise resolved [B]']);

2736 - expect(Scheduler).toFlushAndYield(['B']);

2737 - expect(ReactNoop.getChildren()).toEqual([span('B')]);

2738 -

2739 - React.unstable_withSuspenseConfig(

2740 - () => {

2741 - // First we schedule an inner unrelated update.

2742 - React.unstable_withSuspenseConfig(() =>

2743 - ReactNoop.render(<App page="B" unrelated={true} />),

2744 - );

2745 - // Then we schedule another transition to a slow page,

2746 - // but at this scope we should suspend for longer.

2747 - Scheduler.unstable_next(() => ReactNoop.render(<App page="C" />));

2748 - },

2749 - {timeoutMs: 60000},

2750 - );

2751 - expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]', 'Loading...']);

2752 - expect(ReactNoop.getChildren()).toEqual([span('B')]);

2753 - // Event after a large amount of time, we never show a loading state.

2754 - Scheduler.unstable_advanceTime(60000);

2755 - await advanceTimers(60000);

2756 - expect(ReactNoop.getChildren()).toEqual([span('B')]);

2757 - });

2758 -

2759 - // @gate experimental

2760 - it('withSuspenseConfig delay applies when we use an updated avoided boundary', async () => {

2660 + it('do not show placeholder when updating an avoided boundary with startTransition', async () => {

2661 function App({page}) {

2662 return (

2663 <Suspense fallback={<Text text="Loading..." />}>

@@ -2780,10 +2680,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2680 expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);

2681

2682 // Start transition.

2783 - React.unstable_withSuspenseConfig(

2784 - () => ReactNoop.render(<App page="B" />),

2785 - {timeoutMs: 2000},

2786 - );

2683 + React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));

2684

2685 expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);

2686

@@ -2806,7 +2703,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2703 });

2704

2705 // @gate experimental

2809 - it('withSuspenseConfig delay applies when we use a newly created avoided boundary', async () => {

2706 + it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {

2707 function App({page}) {

2708 return (

2709 <Suspense fallback={<Text text="Loading..." />}>

@@ -2830,10 +2727,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2727 expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);

2728

2729 // Start transition.

2833 - React.unstable_withSuspenseConfig(

2834 - () => ReactNoop.render(<App page="B" />),

2835 - {timeoutMs: 2000},

2836 - );

2730 + React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));

2731

2732 expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);

2733

@@ -2992,12 +2886,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2886 expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);

2887

2888 // Start transition.

2995 - React.unstable_withSuspenseConfig(

2996 - () => {

2997 - ReactNoop.render(<App showContent={true} />);

2998 - },

2999 - {timeoutMs: 2500},

3000 - );

2889 + React.unstable_startTransition(() => {

2890 + ReactNoop.render(<App showContent={true} />);

2891 + });

2892

2893 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

2894 Scheduler.unstable_advanceTime(2000);

@@ -3049,12 +2940,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {

2940 expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);

2941

2942 // Start transition.

3052 - React.unstable_withSuspenseConfig(

3053 - () => {

3054 - ReactNoop.render(<App showContent={true} />);

3055 - },

3056 - {timeoutMs: 5000},

3057 - );

2943 + React.unstable_startTransition(() => {

2944 + ReactNoop.render(<App showContent={true} />);

2945 + });

2946

2947 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);

2948 Scheduler.unstable_advanceTime(2000);

packages/react/index.classic.fb.js

-1

@@ -50,7 +50,6 @@ export {

50 startTransition as unstable_startTransition,

51 SuspenseList,

52 SuspenseList as unstable_SuspenseList,

53 - unstable_withSuspenseConfig,

53 // enableBlocksAPI

54 block,

55 block as unstable_block,

packages/react/index.experimental.js

-1

@@ -44,7 +44,6 @@ export {

44 useDeferredValue as unstable_useDeferredValue,

45 startTransition as unstable_startTransition,

46 SuspenseList as unstable_SuspenseList,

47 - unstable_withSuspenseConfig,

47 // enableBlocksAPI

48 block as unstable_block,

49 unstable_useOpaqueIdentifier,

packages/react/index.js

-1

@@ -78,7 +78,6 @@ export {

78 useDeferredValue as unstable_useDeferredValue,

79 SuspenseList,

80 SuspenseList as unstable_SuspenseList,

81 - unstable_withSuspenseConfig,

81 block,

82 block as unstable_block,

83 unstable_LegacyHidden,

packages/react/index.modern.fb.js

-1

@@ -49,7 +49,6 @@ export {

49 startTransition as unstable_startTransition,

50 SuspenseList,

51 SuspenseList as unstable_SuspenseList,

52 - unstable_withSuspenseConfig,

52 // enableBlocksAPI

53 block,

54 block as unstable_block,

packages/react/src/React.js

-2

@@ -49,7 +49,6 @@ import {

49 useDeferredValue,

50 useOpaqueIdentifier,

51 } from './ReactHooks';

52 -import {withSuspenseConfig} from './ReactBatchConfig';

52 import {

53 createElementWithValidation,

54 createFactoryWithValidation,

@@ -112,7 +111,6 @@ export {

111 useDeferredValue,

112 REACT_SUSPENSE_LIST_TYPE as SuspenseList,

113 REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,

115 - withSuspenseConfig as unstable_withSuspenseConfig,

114 // enableBlocksAPI

115 block,

116 // enableFundamentalAPI

packages/react/src/ReactBatchConfig.js deleted

-25

@@ -1,25 +0,0 @@

1 -/**

2 - * Copyright (c) Facebook, Inc. and its affiliates.

3 - *

4 - * This source code is licensed under the MIT license found in the

5 - * LICENSE file in the root directory of this source tree.

6 - *

7 - * @flow

8 - */

9 -

10 -import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';

11 -

12 -// This is a copy of startTransition, except if null or undefined is passed,

13 -// then updates inside the scope are opted-out of the outer transition scope.

14 -// TODO: Deprecated. Remove in favor of startTransition. Figure out how scopes

15 -// should nest, and whether we need an API to opt-out nested scopes.

16 -export function withSuspenseConfig(scope: () => void, config?: mixed) {

17 - const prevTransition = ReactCurrentBatchConfig.transition;

18 - ReactCurrentBatchConfig.transition =

19 - config === undefined || config === null ? 0 : 1;

20 - try {

21 - scope();

22 - } finally {

23 - ReactCurrentBatchConfig.transition = prevTransition;

24 - }

25 -}