Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove withSuspenseConfig #19724

Merged
merged 1 commit into from
Aug 31, 2020
Merged

Remove withSuspenseConfig #19724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions fixtures/ssr/src/components/Chrome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,9 @@ export default class Chrome extends Component {
<div>
<ThemeToggleButton
onChange={theme => {
React.unstable_withSuspenseConfig(
() => {
this.setState({theme});
},
{timeoutMs: 6000}
);
React.startTransition(() => {
this.setState({theme});
});
}}
/>
</div>
Expand Down
5 changes: 2 additions & 3 deletions packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -913,9 +913,8 @@ describe('ReactDOMServerPartialHydration', () => {
expect(container.textContent).toBe('Hello');

// Render an update with a long timeout.
React.unstable_withSuspenseConfig(
() => root.render(<App text="Hi" className="hi" />),
{timeoutMs: 5000},
React.unstable_startTransition(() =>
root.render(<App text="Hi" className="hi" />),
);

// This shouldn't force the fallback yet.
Expand Down
13 changes: 5 additions & 8 deletions packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<App suspend={true} />);
});
},
{timeout: 5000},
);
React.unstable_startTransition(() => {
act(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this work outside of startTransition?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

act should go on the outside but it's unrelated to this PR

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

if (label === 'concurrent mode') {
// In Concurrent Mode, refresh transitions delay indefinitely.
Expand Down
13 changes: 5 additions & 8 deletions packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,14 +389,11 @@ describe('SimpleEventPlugin', function() {
<button
ref={el => (button = el)}
onClick={() => {
React.unstable_withSuspenseConfig(
() => {
this.setState(state => ({
lowPriCount: state.lowPriCount + 1,
}));
},
{timeoutMs: 5000},
);
React.unstable_startTransition(() => {
this.setState(state => ({
lowPriCount: state.lowPriCount + 1,
}));
});
}}>
{text}
</button>
Expand Down
18 changes: 6 additions & 12 deletions packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,12 +363,9 @@ describe('ReactSuspense', () => {

// Schedule another update. This will have lower priority because it's
// a transition.
React.unstable_withSuspenseConfig(
() => {
root.update(<App shouldSuspend={false} step={2} />);
},
{timeoutMs: 10000},
);
React.unstable_startTransition(() => {
root.update(<App shouldSuspend={false} step={2} />);
});

// Interrupt to trigger a restart.
interrupt();
Expand Down Expand Up @@ -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
Expand Down
152 changes: 20 additions & 132 deletions packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<App text="A" />),
{
timeoutMs: 5000,
},
);
React.unstable_startTransition(() => ReactNoop.render(<App text="A" />));
// The update should suspend.
expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([span('S')]);
Expand All @@ -976,12 +971,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('S')]);

// Schedule another low priority update.
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App text="B" />),
{
timeoutMs: 10000,
},
);
React.unstable_startTransition(() => ReactNoop.render(<App text="B" />));
// This update should also suspend.
expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
expect(ReactNoop.getChildren()).toEqual([span('S')]);
Expand Down Expand Up @@ -2282,7 +2272,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
ReactNoop.render(<Foo renderContent={1} />);

// 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);

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

describe('delays transitions when there a suspense config is supplied', () => {
const SUSPENSE_CONFIG = {
timeoutMs: 2000,
};

describe('startTransition', () => {
// @gate experimental
it('top level render', async () => {
function App({page}) {
Expand All @@ -2330,10 +2316,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
}

// Initial render.
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App page="A" />),
SUSPENSE_CONFIG,
);
React.unstable_startTransition(() => ReactNoop.render(<App page="A" />));

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

// Start transition.
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App page="B" />),
SUSPENSE_CONFIG,
);
React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));

expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
Scheduler.unstable_advanceTime(100000);
Expand Down Expand Up @@ -2389,10 +2369,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.
Expand All @@ -2409,10 +2386,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);
Expand Down Expand Up @@ -2452,10 +2426,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.
Expand All @@ -2472,10 +2443,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);
Expand Down Expand Up @@ -2689,75 +2657,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});

// @gate experimental
it('disables suspense config when nothing is passed to withSuspenseConfig', async () => {
function App({page}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText text={page} ms={2000} />
</Suspense>
);
}

// Initial render.
ReactNoop.render(<App page="A" />);
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(<App page="B" />),
);
},
{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(<App page="B" unrelated={true} />),
);
// Then we schedule another transition to a slow page,
// but at this scope we should suspend for longer.
Scheduler.unstable_next(() => ReactNoop.render(<App page="C" />));
},
{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 (
<Suspense fallback={<Text text="Loading..." />}>
Expand All @@ -2780,10 +2680,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);

// Start transition.
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App page="B" />),
{timeoutMs: 2000},
);
React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));

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

Expand All @@ -2806,7 +2703,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 (
<Suspense fallback={<Text text="Loading..." />}>
Expand All @@ -2830,10 +2727,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);

// Start transition.
React.unstable_withSuspenseConfig(
() => ReactNoop.render(<App page="B" />),
{timeoutMs: 2000},
);
React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));

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

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

// Start transition.
React.unstable_withSuspenseConfig(
() => {
ReactNoop.render(<App showContent={true} />);
},
{timeoutMs: 2500},
);
React.unstable_startTransition(() => {
ReactNoop.render(<App showContent={true} />);
});

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

// Start transition.
React.unstable_withSuspenseConfig(
() => {
ReactNoop.render(<App showContent={true} />);
},
{timeoutMs: 5000},
);
React.unstable_startTransition(() => {
ReactNoop.render(<App showContent={true} />);
});

expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
Scheduler.unstable_advanceTime(2000);
Expand Down
1 change: 0 additions & 1 deletion packages/react/index.classic.fb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ export {
startTransition as unstable_startTransition,
SuspenseList,
SuspenseList as unstable_SuspenseList,
unstable_withSuspenseConfig,
// enableBlocksAPI
block,
block as unstable_block,
Expand Down
1 change: 0 additions & 1 deletion packages/react/index.experimental.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion packages/react/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ export {
useDeferredValue as unstable_useDeferredValue,
SuspenseList,
SuspenseList as unstable_SuspenseList,
unstable_withSuspenseConfig,
block,
block as unstable_block,
unstable_LegacyHidden,
Expand Down
1 change: 0 additions & 1 deletion packages/react/index.modern.fb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ export {
startTransition as unstable_startTransition,
SuspenseList,
SuspenseList as unstable_SuspenseList,
unstable_withSuspenseConfig,
// enableBlocksAPI
block,
block as unstable_block,
Expand Down
Loading