Edit Suspense Priority Warning Message (#16186)
* move 'component that triggered the update' in suspense priority warning message to the beginning of the message * renamed warnings
lunaruan committed
Jul 23, 2019 at 19:08 UTC
06cc9969947e614636e9260849fe5b50514eadfe
4 files changed
+69
-33
packages/react-reconciler/src/ReactFiberWorkLoop.js
+27
-18
@@ -2639,29 +2639,38 @@ function flushSuspensePriorityWarningInDEV() {
2639
2640
componentsThatTriggeredHighPriSuspend = null;
2641
2642
- const componentThatTriggeredSuspenseError =
2643
- componentsThatTriggeredSuspendNames.length > 0
2644
- ? '\n' +
2645
- 'The components that triggered the update: ' +
2646
- componentsThatTriggeredSuspendNames.sort().join(', ')
2647
- : '';
2642
+ const componentNamesString = componentNames.sort().join(', ');
2643
+ let componentThatTriggeredSuspenseError = '';
2644
+ if (componentsThatTriggeredSuspendNames.length > 0) {
2645
+ componentThatTriggeredSuspenseError =
2646
+ 'The following components triggered a user-blocking update:' +
2647
+ '\n\n' +
2648
+ ' ' +
2649
+ componentsThatTriggeredSuspendNames.sort().join(', ') +
2650
+ '\n\n' +
2651
+ 'that was then suspended by:' +
2652
+ '\n\n' +
2653
+ ' ' +
2654
+ componentNamesString;
2655
+ } else {
2656
+ componentThatTriggeredSuspenseError =
2657
+ 'A user-blocking update was suspended by:' +
2658
+ '\n\n' +
2659
+ ' ' +
2660
+ componentNamesString;
2661
+ }
2662
+
2663
warningWithoutStack(
2664
false,
2650
- 'The following components suspended during a user-blocking update: %s' +
2651
- '%s' +
2665
+ '%s' +
2666
'\n\n' +
2653
- 'Updates triggered by user interactions (e.g. click events) are ' +
2654
- 'considered user-blocking by default. They should not suspend. ' +
2655
- 'Updates that can afford to take a bit longer should be wrapped ' +
2656
- 'with `Scheduler.next` (or an equivalent abstraction). This ' +
2657
- 'typically includes any update that shows new content, like ' +
2658
- 'a navigation.' +
2667
+ 'The fix is to split the update into multiple parts: a user-blocking ' +
2668
+ 'update to provide immediate feedback, and another update that ' +
2669
+ 'triggers the bulk of the changes.' +
2670
'\n\n' +
2660
- 'Generally, you should split user interactions into at least two ' +
2661
- 'seprate updates: a user-blocking update to provide immediate ' +
2662
- 'feedback, and another update to perform the actual change.',
2671
+ 'Refer to the documentation for useSuspenseTransition to learn how ' +
2672
+ 'to implement this pattern.',
2673
// TODO: Add link to React docs with more information, once it exists
2664
- componentNames.sort().join(', '),
2674
componentThatTriggeredSuspenseError,
2675
);
2676
}
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+4
-1
@@ -344,7 +344,10 @@ describe('ReactSuspense', () => {
344
if (__DEV__) {
345
expect(console.error).toHaveBeenCalledTimes(2);
346
expect(console.error.calls.argsFor(0)[0]).toContain(
347
- 'Warning: The following components suspended during a user-blocking update: ',
347
+ 'Warning: %s\n\nThe fix is to split the update',
348
+ );
349
+ expect(console.error.calls.argsFor(0)[1]).toContain(
350
+ 'A user-blocking update was suspended by:',
351
);
352
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
353
}
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+34
-13
@@ -519,7 +519,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
519
if (__DEV__) {
520
expect(console.error).toHaveBeenCalledTimes(1);
521
expect(console.error.calls.argsFor(0)[0]).toContain(
522
- 'Warning: The following components suspended during a user-blocking update: ',
522
+ 'Warning: %s\n\nThe fix is to split the update',
523
+ );
524
+ expect(console.error.calls.argsFor(0)[1]).toContain(
525
+ 'A user-blocking update was suspended by:',
526
);
527
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
528
}
@@ -671,7 +674,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
674
if (__DEV__) {
675
expect(console.error).toHaveBeenCalledTimes(1);
676
expect(console.error.calls.argsFor(0)[0]).toContain(
674
- 'Warning: The following components suspended during a user-blocking update: ',
677
+ 'Warning: %s\n\nThe fix is to split the update',
678
+ );
679
+ expect(console.error.calls.argsFor(0)[1]).toContain(
680
+ 'A user-blocking update was suspended by:',
681
);
682
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
683
}
@@ -704,7 +710,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
710
if (__DEV__) {
711
expect(console.error).toHaveBeenCalledTimes(1);
712
expect(console.error.calls.argsFor(0)[0]).toContain(
707
- 'Warning: The following components suspended during a user-blocking update: ',
713
+ 'Warning: %s\n\nThe fix is to split the update',
714
+ );
715
+ expect(console.error.calls.argsFor(0)[1]).toContain(
716
+ 'A user-blocking update was suspended by:',
717
);
718
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
719
}
@@ -793,7 +802,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
802
if (__DEV__) {
803
expect(console.error).toHaveBeenCalledTimes(2);
804
expect(console.error.calls.argsFor(0)[0]).toContain(
796
- 'Warning: The following components suspended during a user-blocking update: ',
805
+ 'Warning: %s\n\nThe fix is to split the update',
806
+ );
807
+ expect(console.error.calls.argsFor(0)[1]).toContain(
808
+ 'A user-blocking update was suspended by:',
809
);
810
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
811
}
@@ -1631,8 +1643,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1643
'Loading...',
1644
]);
1645
}).toWarnDev(
1634
- 'The following components suspended during a user-blocking ' +
1635
- 'update: AsyncText',
1646
+ 'Warning: A user-blocking update was suspended by:' +
1647
+ '\n\n' +
1648
+ ' AsyncText',
1649
{withoutStack: true},
1650
);
1651
@@ -1675,9 +1688,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1688
);
1689
});
1690
}).toWarnDev(
1678
- 'The following components suspended during a user-blocking update: AsyncText' +
1679
- '\n' +
1680
- 'The components that triggered the update: App',
1691
+ 'Warning: The following components triggered a user-blocking update:' +
1692
+ '\n\n' +
1693
+ ' App' +
1694
+ '\n\n' +
1695
+ 'that was then suspended by:' +
1696
+ '\n\n' +
1697
+ ' AsyncText',
1698
{withoutStack: true},
1699
);
1700
});
@@ -1709,9 +1726,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1726
);
1727
});
1728
}).toWarnDev(
1712
- 'The following components suspended during a user-blocking update: AsyncText' +
1713
- '\n' +
1714
- 'The components that triggered the update: App',
1729
+ 'Warning: The following components triggered a user-blocking update:' +
1730
+ '\n\n' +
1731
+ ' App' +
1732
+ '\n\n' +
1733
+ 'that was then suspended by:' +
1734
+ '\n\n' +
1735
+ ' AsyncText',
1736
{withoutStack: true},
1737
);
1738
});
@@ -1754,7 +1775,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1775
expect(() => {
1776
Scheduler.unstable_flushAll();
1777
}).toWarnDev(
1757
- 'Warning: The following components suspended during a user-blocking update: A, C',
1778
+ 'Warning: A user-blocking update was suspended by:' + '\n\n' + ' A, C',
1779
{withoutStack: true},
1780
);
1781
});
packages/react/src/__tests__/ReactProfiler-test.internal.js
+4
-1
@@ -2735,7 +2735,10 @@ describe('Profiler', () => {
2735
if (__DEV__) {
2736
expect(console.error).toHaveBeenCalledTimes(1);
2737
expect(console.error.calls.argsFor(0)[0]).toContain(
2738
- 'Warning: The following components suspended during a user-blocking update: ',
2738
+ 'Warning: %s\n\nThe fix is to split the update',
2739
+ );
2740
+ expect(console.error.calls.argsFor(0)[1]).toContain(
2741
+ 'A user-blocking update was suspended by:',
2742
);
2743
expect(console.error.calls.argsFor(0)[1]).toContain('AsyncText');
2744
}