Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

BugFix: Suspense priority warning firing when not supposed to (#16256)

Browse Source 
Previously, the suspense priority warning was fired even if the Root wasn't suspended. Changed the warning to fire only when the root is suspended.

Also refactored the suspense priority warning so it's easier to read.
This commit is contained in:
lunaruan
2019-08-02 13:54:11 -07:00
committed by GitHub
parent 05dce7598a
commit c4c9f086eb
4 changed files with 89 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-reconciler/src/ReactFiberWorkLoop.js
Vendored
+22 -58
View File
@@ -802,7 +802,6 @@ function prepareFreshStack(root, expirationTime) {
if (__DEV__) {
ReactStrictModeWarnings.discardPendingWarnings();
componentsThatSuspendedAtHighPri = null;
componentsThatTriggeredHighPriSuspend = null;
}
}
@@ -990,8 +989,6 @@ function renderRoot(
// Set this to null to indicate there's no in-progress render.
workInProgressRoot = null;
flushSuspensePriorityWarningInDEV();
switch (workInProgressRootExitStatus) {
case RootIncomplete: {
invariant(false, 'Should have a work-in-progress.');
@@ -1022,6 +1019,8 @@ function renderRoot(
return commitRoot.bind(null, root);
}
case RootSuspended: {
flushSuspensePriorityWarningInDEV();
// We have an acceptable loading state. We need to figure out if we should
// immediately commit it or wait a bit.
@@ -1076,6 +1075,8 @@ function renderRoot(
return commitRoot.bind(null, root);
}
case RootSuspendedWithDelay: {
flushSuspensePriorityWarningInDEV();
if (
!isSync &&
// do not delay if we're inside an act() scope
@@ -2610,7 +2611,6 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
}
}
let componentsThatSuspendedAtHighPri = null;
let componentsThatTriggeredHighPriSuspend = null;
export function checkForWrongSuspensePriorityInDEV(sourceFiber: Fiber) {
if (__DEV__) {
@@ -2697,70 +2697,34 @@ export function checkForWrongSuspensePriorityInDEV(sourceFiber: Fiber) {
}
workInProgressNode = workInProgressNode.return;
}
// Add the component name to a set.
const componentName = getComponentName(sourceFiber.type);
if (componentsThatSuspendedAtHighPri === null) {
componentsThatSuspendedAtHighPri = new Set([componentName]);
} else {
componentsThatSuspendedAtHighPri.add(componentName);
}
}
}
}
function flushSuspensePriorityWarningInDEV() {
if (__DEV__) {
if (componentsThatSuspendedAtHighPri !== null) {
if (componentsThatTriggeredHighPriSuspend !== null) {
const componentNames = [];
componentsThatSuspendedAtHighPri.forEach(name => {
componentNames.push(name);
});
componentsThatSuspendedAtHighPri = null;
const componentsThatTriggeredSuspendNames = [];
if (componentsThatTriggeredHighPriSuspend !== null) {
componentsThatTriggeredHighPriSuspend.forEach(name =>
componentsThatTriggeredSuspendNames.push(name),
);
}
componentsThatTriggeredHighPriSuspend.forEach(name =>
componentNames.push(name),
);
componentsThatTriggeredHighPriSuspend = null;
const componentNamesString = componentNames.sort().join(', ');
let componentThatTriggeredSuspenseError = '';
if (componentsThatTriggeredSuspendNames.length > 0) {
componentThatTriggeredSuspenseError =
'The following components triggered a user-blocking update:' +
'\n\n' +
' ' +
componentsThatTriggeredSuspendNames.sort().join(', ') +
'\n\n' +
'that was then suspended by:' +
'\n\n' +
' ' +
componentNamesString;
} else {
componentThatTriggeredSuspenseError =
'A user-blocking update was suspended by:' +
'\n\n' +
' ' +
componentNamesString;
if (componentNames.length > 0) {
warningWithoutStack(
false,
'%s triggered a user-blocking update that suspended.' +
'\n\n' +
'The fix is to split the update into multiple parts: a user-blocking ' +
'update to provide immediate feedback, and another update that ' +
'triggers the bulk of the changes.' +
'\n\n' +
'Refer to the documentation for useSuspenseTransition to learn how ' +
'to implement this pattern.',
// TODO: Add link to React docs with more information, once it exists
componentNames.sort().join(', '),
);
}
warningWithoutStack(
false,
'%s' +
'\n\n' +
'The fix is to split the update into multiple parts: a user-blocking ' +
'update to provide immediate feedback, and another update that ' +
'triggers the bulk of the changes.' +
'\n\n' +
'Refer to the documentation for useSuspenseTransition to learn how ' +
'to implement this pattern.',
// TODO: Add link to React docs with more information, once it exists
componentThatTriggeredSuspenseError,
);
}
}
}
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
-11
View File
@@ -327,7 +327,6 @@ describe('ReactSuspense', () => {
});
it('throws if tree suspends and none of the Suspense ancestors have a fallback', () => {
spyOnDev(console, 'error');
ReactTestRenderer.create(
<Suspense>
<AsyncText text="Hi" ms={1000} />
@@ -341,16 +340,6 @@ describe('ReactSuspense', () => {
'AsyncText suspended while rendering, but no fallback UI was specified.',
);
expect(Scheduler).toHaveYielded(['Suspend! [Hi]', 'Suspend! [Hi]']);
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(2);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: %s\n\nThe fix is to split the update',
);
expect(console.error.calls.argsFor(0)[1]).toContain(
'A user-blocking update was suspended by:',
);
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
}
});
describe('outside concurrent mode', () => {
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+67 -107
View File
@@ -489,7 +489,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => {
spyOnDev(console, 'error');
function App(props) {
if (props.hide) {
return <Text text="(empty)" />;
@@ -517,16 +516,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
'(empty)',
]);
expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: %s\n\nThe fix is to split the update',
);
expect(console.error.calls.argsFor(0)[1]).toContain(
'A user-blocking update was suspended by:',
);
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
}
});
it('forces an expiration after an update times out', async () => {
@@ -671,22 +660,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
expect(Scheduler).toFlushAndYield(['Async']);
expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: %s\n\nThe fix is to split the update',
);
expect(console.error.calls.argsFor(0)[1]).toContain(
'A user-blocking update was suspended by:',
);
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
}
});
it('suspending inside an expired expiration boundary will bubble to the next one', async () => {
spyOnDev(console, 'error');
ReactNoop.flushSync(() =>
ReactNoop.render(
<Fragment>
@@ -707,17 +683,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
]);
// The tree commits synchronously
expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: %s\n\nThe fix is to split the update',
);
expect(console.error.calls.argsFor(0)[1]).toContain(
'A user-blocking update was suspended by:',
);
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
}
});
it('expires early by default', async () => {
@@ -795,21 +760,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
});
it('throws a helpful error when an update is suspends without a placeholder', () => {
spyOnDev(console, 'error');
ReactNoop.render(<AsyncText ms={1000} text="Async" />);
expect(Scheduler).toFlushAndThrow(
'AsyncText suspended while rendering, but no fallback UI was specified.',
);
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(2);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: %s\n\nThe fix is to split the update',
);
expect(console.error.calls.argsFor(0)[1]).toContain(
'A user-blocking update was suspended by:',
);
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
}
});
it('a Suspense component correctly handles more than one suspended child', async () => {
@@ -1637,18 +1591,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
Scheduler.unstable_advanceTime(100);
await advanceTimers(100);
expect(() => {
expect(Scheduler).toFlushAndYield([
// A suspends
'Suspend! [A]',
'Loading...',
]);
}).toWarnDev(
'Warning: A user-blocking update was suspended by:' +
'\n\n' +
' AsyncText',
{withoutStack: true},
);
expect(Scheduler).toFlushAndYield([
// A suspends
'Suspend! [A]',
'Loading...',
]);
// We're now suspended and we haven't shown anything yet.
expect(ReactNoop.getChildren()).toEqual([]);
@@ -1689,13 +1636,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
);
});
}).toWarnDev(
'Warning: The following components triggered a user-blocking update:' +
'\n\n' +
' App' +
'\n\n' +
'that was then suspended by:' +
'\n\n' +
' AsyncText',
'Warning: App triggered a user-blocking update that suspended.' + '\n\n',
{withoutStack: true},
);
});
@@ -1727,60 +1668,79 @@ describe('ReactSuspenseWithNoopRenderer', () => {
);
});
}).toWarnDev(
'Warning: The following components triggered a user-blocking update:' +
'\n\n' +
' App' +
'\n\n' +
'that was then suspended by:' +
'\n\n' +
' AsyncText',
'Warning: App triggered a user-blocking update that suspended.' + '\n\n',
{withoutStack: true},
);
});
it('warns when suspending inside discrete update', async () => {
function A() {
Scheduler.unstable_yieldValue('A');
TextResource.read(['A', 1000]);
return 'A';
it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => {
let showB;
class App extends React.Component {
state = {showB: false};
render() {
showB = () => this.setState({showB: true});
return (
<Suspense fallback="Loading...">
{<AsyncText text="A" />}
{this.state.showB && <AsyncText text="B" />}
</Suspense>
);
}
}
function B() {
return 'B';
}
await ReactNoop.act(async () => {
ReactNoop.render(<App />);
});
function C() {
TextResource.read(['C', 1000]);
return 'C';
}
expect(Scheduler).toHaveYielded(['Suspend! [A]']);
expect(ReactNoop).toMatchRenderedOutput('Loading...');
function App() {
return (
<Suspense fallback="Loading...">
<A />
<B />
<C />
<C />
<C />
<C />
</Suspense>
ReactNoop.act(() => {
Scheduler.unstable_runWithPriority(
Scheduler.unstable_UserBlockingPriority,
() => showB(),
);
}
});
ReactNoop.discreteUpdates(() => ReactNoop.render(<App />));
expect(Scheduler).toFlushAndYieldThrough(['A']);
// Warning is not flushed until the commit phase
// Timeout and commit the fallback
expect(() => {
Scheduler.unstable_flushAll();
}).toWarnDev(
'Warning: A user-blocking update was suspended by:' + '\n\n' + ' A, C',
{withoutStack: true},
);
expect(Scheduler).toHaveYielded(['Suspend! [A]', 'Suspend! [B]']);
});
it(
'warns when component that triggered user-blocking update is between Suspense boundary ' +
'and component that suspended',
async () => {
let _setShow;
function A() {
const [show, setShow] = React.useState(false);
_setShow = setShow;
return show && <AsyncText text="A" />;
}
function App() {
return (
<Suspense fallback="Loading...">
<A />
</Suspense>
);
}
await ReactNoop.act(async () => {
ReactNoop.render(<App />);
});
expect(() => {
ReactNoop.act(() => {
Scheduler.unstable_runWithPriority(
Scheduler.unstable_UserBlockingPriority,
() => _setShow(true),
);
});
}).toWarnDev(
'Warning: A triggered a user-blocking update that suspended.' + '\n\n',
{withoutStack: true},
);
},
);
it('normal priority updates suspending do not warn for class components', async () => {
let show;
class App extends React.Component {
packages/react/src/__tests__/ReactProfiler-test.internal.js
-12
View File
@@ -2626,7 +2626,6 @@ describe('Profiler', () => {
});
it('handles high-pri renderers between suspended and resolved (async) trees', async () => {
spyOnDev(console, 'error');
// Set up an initial shell. We need to set this up before the test sceanrio
// because we want initial render to suspend on navigation to the initial state.
let renderer = ReactTestRenderer.create(
@@ -2729,17 +2728,6 @@ describe('Profiler', () => {
expect(
onInteractionScheduledWorkCompleted.mock.calls[1][0],
).toMatchInteraction(highPriUpdateInteraction);
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(1);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Warning: %s\n\nThe fix is to split the update',
);
expect(console.error.calls.argsFor(0)[1]).toContain(
'A user-blocking update was suspended by:',
);
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
}
});
});
});