@@ -802,7 +802,6 @@ function prepareFreshStack(root, expirationTime) {
802
802
803
803
if ( __DEV__ ) {
804
804
ReactStrictModeWarnings . discardPendingWarnings ( ) ;
805
- componentsThatSuspendedAtHighPri = null ;
806
805
componentsThatTriggeredHighPriSuspend = null ;
807
806
}
808
807
}
@@ -990,8 +989,6 @@ function renderRoot(
990
989
// Set this to null to indicate there's no in-progress render.
991
990
workInProgressRoot = null ;
992
991
993
- flushSuspensePriorityWarningInDEV ( ) ;
994
-
995
992
switch ( workInProgressRootExitStatus ) {
996
993
case RootIncomplete : {
997
994
invariant ( false , 'Should have a work-in-progress.' ) ;
@@ -1022,6 +1019,8 @@ function renderRoot(
1022
1019
return commitRoot . bind ( null , root ) ;
1023
1020
}
1024
1021
case RootSuspended : {
1022
+ flushSuspensePriorityWarningInDEV ( ) ;
1023
+
1025
1024
// We have an acceptable loading state. We need to figure out if we should
1026
1025
// immediately commit it or wait a bit.
1027
1026
@@ -1076,6 +1075,8 @@ function renderRoot(
1076
1075
return commitRoot . bind ( null , root ) ;
1077
1076
}
1078
1077
case RootSuspendedWithDelay : {
1078
+ flushSuspensePriorityWarningInDEV ( ) ;
1079
+
1079
1080
if (
1080
1081
! isSync &&
1081
1082
// do not delay if we're inside an act() scope
@@ -2610,7 +2611,6 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
2610
2611
}
2611
2612
}
2612
2613
2613
- let componentsThatSuspendedAtHighPri = null ;
2614
2614
let componentsThatTriggeredHighPriSuspend = null ;
2615
2615
export function checkForWrongSuspensePriorityInDEV ( sourceFiber : Fiber ) {
2616
2616
if ( __DEV__ ) {
@@ -2697,70 +2697,34 @@ export function checkForWrongSuspensePriorityInDEV(sourceFiber: Fiber) {
2697
2697
}
2698
2698
workInProgressNode = workInProgressNode . return ;
2699
2699
}
2700
-
2701
- // Add the component name to a set.
2702
- const componentName = getComponentName ( sourceFiber . type ) ;
2703
- if ( componentsThatSuspendedAtHighPri === null ) {
2704
- componentsThatSuspendedAtHighPri = new Set ( [ componentName ] ) ;
2705
- } else {
2706
- componentsThatSuspendedAtHighPri . add ( componentName ) ;
2707
- }
2708
2700
}
2709
2701
}
2710
2702
}
2711
2703
2712
2704
function flushSuspensePriorityWarningInDEV ( ) {
2713
2705
if ( __DEV__ ) {
2714
- if ( componentsThatSuspendedAtHighPri !== null ) {
2706
+ if ( componentsThatTriggeredHighPriSuspend !== null ) {
2715
2707
const componentNames = [ ] ;
2716
- componentsThatSuspendedAtHighPri . forEach ( name => {
2717
- componentNames . push ( name ) ;
2718
- } ) ;
2719
- componentsThatSuspendedAtHighPri = null ;
2720
-
2721
- const componentsThatTriggeredSuspendNames = [ ] ;
2722
- if ( componentsThatTriggeredHighPriSuspend !== null ) {
2723
- componentsThatTriggeredHighPriSuspend . forEach ( name =>
2724
- componentsThatTriggeredSuspendNames . push ( name ) ,
2725
- ) ;
2726
- }
2727
-
2708
+ componentsThatTriggeredHighPriSuspend . forEach ( name =>
2709
+ componentNames . push ( name ) ,
2710
+ ) ;
2728
2711
componentsThatTriggeredHighPriSuspend = null ;
2729
2712
2730
- const componentNamesString = componentNames . sort ( ) . join ( ', ' ) ;
2731
- let componentThatTriggeredSuspenseError = '' ;
2732
- if ( componentsThatTriggeredSuspendNames . length > 0 ) {
2733
- componentThatTriggeredSuspenseError =
2734
- 'The following components triggered a user-blocking update:' +
2735
- '\n\n' +
2736
- ' ' +
2737
- componentsThatTriggeredSuspendNames . sort ( ) . join ( ', ' ) +
2738
- '\n\n' +
2739
- 'that was then suspended by:' +
2740
- '\n\n' +
2741
- ' ' +
2742
- componentNamesString ;
2743
- } else {
2744
- componentThatTriggeredSuspenseError =
2745
- 'A user-blocking update was suspended by:' +
2746
- '\n\n' +
2747
- ' ' +
2748
- componentNamesString ;
2713
+ if ( componentNames . length > 0 ) {
2714
+ warningWithoutStack (
2715
+ false ,
2716
+ '%s triggered a user-blocking update that suspended.' +
2717
+ '\n\n' +
2718
+ 'The fix is to split the update into multiple parts: a user-blocking ' +
2719
+ 'update to provide immediate feedback, and another update that ' +
2720
+ 'triggers the bulk of the changes.' +
2721
+ '\n\n' +
2722
+ 'Refer to the documentation for useSuspenseTransition to learn how ' +
2723
+ 'to implement this pattern.' ,
2724
+ // TODO: Add link to React docs with more information, once it exists
2725
+ componentNames . sort ( ) . join ( ', ' ) ,
2726
+ ) ;
2749
2727
}
2750
-
2751
- warningWithoutStack (
2752
- false ,
2753
- '%s' +
2754
- '\n\n' +
2755
- 'The fix is to split the update into multiple parts: a user-blocking ' +
2756
- 'update to provide immediate feedback, and another update that ' +
2757
- 'triggers the bulk of the changes.' +
2758
- '\n\n' +
2759
- 'Refer to the documentation for useSuspenseTransition to learn how ' +
2760
- 'to implement this pattern.' ,
2761
- // TODO: Add link to React docs with more information, once it exists
2762
- componentThatTriggeredSuspenseError ,
2763
- ) ;
2764
2728
}
2765
2729
}
2766
2730
}
0 commit comments