Skip to content

Commit 1f38dcf

Browse files
acdliteacdlite
authored
Remove withSuspenseConfig (#19724)
Removes `withSuspenseConfig` and migrates relevant tests to `startTransition` instead. We only had one caller in www, which I've removed.
1 parent 1396e4a commit 1f38dcf

File tree

12 files changed

+41
-200
lines changed

12 files changed

+41
-200
lines changed

Diff for: ‎fixtures/ssr/src/components/Chrome.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,9 @@ export default class Chrome extends Component {
2828
<div>
2929
<ThemeToggleButton
3030
onChange={theme => {
31-
React.unstable_withSuspenseConfig(
32-
() => {
33-
this.setState({theme});
34-
},
35-
{timeoutMs: 6000}
36-
);
31+
React.startTransition(() => {
32+
this.setState({theme});
33+
});
3734
}}
3835
/>
3936
</div>

Diff for: ‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -913,9 +913,8 @@ describe('ReactDOMServerPartialHydration', () => {
913913
expect(container.textContent).toBe('Hello');
914914

915915
// 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" />),
919918
);
920919

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

Diff for: ‎packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -771,14 +771,11 @@ function runActTests(label, render, unmount, rerender) {
771771
expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
772772

773773
// 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+
});
782779

783780
if (label === 'concurrent mode') {
784781
// In Concurrent Mode, refresh transitions delay indefinitely.

Diff for: ‎packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -389,14 +389,11 @@ describe('SimpleEventPlugin', function() {
389389
<button
390390
ref={el => (button = el)}
391391
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+
});
400397
}}>
401398
{text}
402399
</button>

Diff for: ‎packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

+6-12
Original file line numberDiff line numberDiff line change
@@ -363,12 +363,9 @@ describe('ReactSuspense', () => {
363363

364364
// Schedule another update. This will have lower priority because it's
365365
// 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+
});
372369

373370
// Interrupt to trigger a restart.
374371
interrupt();
@@ -465,12 +462,9 @@ describe('ReactSuspense', () => {
465462

466463
// Schedule another update. This will have lower priority because it's
467464
// a transition.
468-
React.unstable_withSuspenseConfig(
469-
() => {
470-
setShouldHideInParent(true);
471-
},
472-
{timeoutMs: 10000},
473-
);
465+
React.unstable_startTransition(() => {
466+
setShouldHideInParent(true);
467+
});
474468

475469
expect(Scheduler).toFlushAndYieldThrough([
476470
// Should have restarted the first update, because of the interruption

Diff for: ‎packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js

+20-132
Original file line numberDiff line numberDiff line change
@@ -959,12 +959,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
959959
expect(Scheduler).toFlushAndYield(['S']);
960960

961961
// 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" />));
968963
// The update should suspend.
969964
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
970965
expect(ReactNoop.getChildren()).toEqual([span('S')]);
@@ -976,12 +971,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
976971
expect(ReactNoop.getChildren()).toEqual([span('S')]);
977972

978973
// 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" />));
985975
// This update should also suspend.
986976
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
987977
expect(ReactNoop.getChildren()).toEqual([span('S')]);
@@ -2282,7 +2272,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
22822272
ReactNoop.render(<Foo renderContent={1} />);
22832273

22842274
// 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.
22862276
Scheduler.unstable_advanceTime(1500);
22872277
await advanceTimers(1500);
22882278

@@ -2314,11 +2304,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
23142304
expect(ReactNoop.getChildren()).toEqual([span('Loading A...')]);
23152305
});
23162306

2317-
describe('delays transitions when there a suspense config is supplied', () => {
2318-
const SUSPENSE_CONFIG = {
2319-
timeoutMs: 2000,
2320-
};
2321-
2307+
describe('startTransition', () => {
23222308
// @gate experimental
23232309
it('top level render', async () => {
23242310
function App({page}) {
@@ -2330,10 +2316,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
23302316
}
23312317

23322318
// 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" />));
23372320

23382321
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
23392322
// Only a short time is needed to unsuspend the initial loading state.
@@ -2349,10 +2332,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
23492332
expect(ReactNoop.getChildren()).toEqual([span('A')]);
23502333

23512334
// 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" />));
23562336

23572337
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
23582338
Scheduler.unstable_advanceTime(100000);
@@ -2389,10 +2369,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
23892369

23902370
// Initial render.
23912371
await ReactNoop.act(async () => {
2392-
React.unstable_withSuspenseConfig(
2393-
() => transitionToPage('A'),
2394-
SUSPENSE_CONFIG,
2395-
);
2372+
React.unstable_startTransition(() => transitionToPage('A'));
23962373

23972374
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
23982375
// Only a short time is needed to unsuspend the initial loading state.
@@ -2409,10 +2386,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
24092386

24102387
// Start transition.
24112388
await ReactNoop.act(async () => {
2412-
React.unstable_withSuspenseConfig(
2413-
() => transitionToPage('B'),
2414-
SUSPENSE_CONFIG,
2415-
);
2389+
React.unstable_startTransition(() => transitionToPage('B'));
24162390

24172391
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
24182392
Scheduler.unstable_advanceTime(100000);
@@ -2452,10 +2426,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
24522426

24532427
// Initial render.
24542428
await ReactNoop.act(async () => {
2455-
React.unstable_withSuspenseConfig(
2456-
() => transitionToPage('A'),
2457-
SUSPENSE_CONFIG,
2458-
);
2429+
React.unstable_startTransition(() => transitionToPage('A'));
24592430

24602431
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
24612432
// Only a short time is needed to unsuspend the initial loading state.
@@ -2472,10 +2443,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
24722443

24732444
// Start transition.
24742445
await ReactNoop.act(async () => {
2475-
React.unstable_withSuspenseConfig(
2476-
() => transitionToPage('B'),
2477-
SUSPENSE_CONFIG,
2478-
);
2446+
React.unstable_startTransition(() => transitionToPage('B'));
24792447

24802448
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
24812449
Scheduler.unstable_advanceTime(100000);
@@ -2689,75 +2657,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
26892657
});
26902658

26912659
// @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 () => {
27612661
function App({page}) {
27622662
return (
27632663
<Suspense fallback={<Text text="Loading..." />}>
@@ -2780,10 +2680,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
27802680
expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
27812681

27822682
// 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" />));
27872684

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

@@ -2806,7 +2703,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
28062703
});
28072704

28082705
// @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 () => {
28102707
function App({page}) {
28112708
return (
28122709
<Suspense fallback={<Text text="Loading..." />}>
@@ -2830,10 +2727,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
28302727
expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
28312728

28322729
// 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" />));
28372731

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

@@ -2992,12 +2886,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
29922886
expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
29932887

29942888
// 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+
});
30012892

30022893
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
30032894
Scheduler.unstable_advanceTime(2000);
@@ -3049,12 +2940,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
30492940
expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);
30502941

30512942
// 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+
});
30582946

30592947
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
30602948
Scheduler.unstable_advanceTime(2000);

Diff for: ‎packages/react/index.classic.fb.js

-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export {
5050
startTransition as unstable_startTransition,
5151
SuspenseList,
5252
SuspenseList as unstable_SuspenseList,
53-
unstable_withSuspenseConfig,
5453
// enableBlocksAPI
5554
block,
5655
block as unstable_block,

Diff for: ‎packages/react/index.experimental.js

-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export {
4444
useDeferredValue as unstable_useDeferredValue,
4545
startTransition as unstable_startTransition,
4646
SuspenseList as unstable_SuspenseList,
47-
unstable_withSuspenseConfig,
4847
// enableBlocksAPI
4948
block as unstable_block,
5049
unstable_useOpaqueIdentifier,

Diff for: ‎packages/react/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ export {
7878
useDeferredValue as unstable_useDeferredValue,
7979
SuspenseList,
8080
SuspenseList as unstable_SuspenseList,
81-
unstable_withSuspenseConfig,
8281
block,
8382
block as unstable_block,
8483
unstable_LegacyHidden,

Diff for: ‎packages/react/index.modern.fb.js

-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export {
4949
startTransition as unstable_startTransition,
5050
SuspenseList,
5151
SuspenseList as unstable_SuspenseList,
52-
unstable_withSuspenseConfig,
5352
// enableBlocksAPI
5453
block,
5554
block as unstable_block,

0 commit comments

Comments
 (0)