Skip to content

Commit e34e27e

Browse files
committed
[Fiber] Yield every other frame for Transition/Retry work (#31828)
This flag first moves the `shouldYield()` logic into React itself. We need this for `postTask` compatibility anyway since this logic is no longer a concern of the scheduler. This means that there can also be no global `requestPaint()` that asks for painting earlier. So this is best rolled out with `enableAlwaysYieldScheduler` (and ideally `enableYieldingBeforePassive`) instead of `enableRequestPaint`. Once in React we can change the yield timing heuristics. This uses the previous 5ms for Idle work to keep everything responsive while doing background work. However, for Transitions and Retries we have seen that same thread animations (like loading states animating, or constant animations like cool Three.js stuff) can take CPU time away from the Transition that causes moving into new content to slow down. Therefore we only yield every 25ms. The purpose of this yield is not to avoid the overhead of yielding, which is very low, but rather to intentionally block any frequently occurring other main thread work like animations from starving our work. If we could we could just tell everyone else to throttle their stuff for ideal scheduling but that's not quite realistic. In other words, the purpose of this is to reduce the frame rate of animations to 30 fps and we achieve this by not yielding. We still do yield to allow the animations to not just stall. This seems like a good balance. The 5ms of Idle is because we don't really need to yield less often since the overhead is low. We keep it low to allow 120 fps animations to run if necessary and our work may not be the only work within a frame so we need to yield early enough to leave enough time left. Similarly we choose 25ms rather than say 35ms to ensure that we push long enough to guarantee to half the frame rate but low enough that there's plenty of time left for a rAF to power each animation every other frame. It's also low enough that if something else interrupts the work like a new interaction, we can still be responsive to that within 50ms or so. We also need to yield in case there's I/O work that needs to get bounced through the main thread. This flag is currently off everywhere since we have so many other scheduling flags but that means there's some urgency to roll those out fully so we can test this one. There's also some tests to update since this doesn't go through the Mock scheduler anymore for yields. DiffTrain build for [fe21c94](fe21c94)
1 parent ee64237 commit e34e27e

34 files changed

+126
-126
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
de82912e620518d501680bbd93fbb5cc8d134223
1+
1e9eb95db5b3a2064ecc26915a4e640b3a9bdaf5
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
de82912e620518d501680bbd93fbb5cc8d134223
1+
1e9eb95db5b3a2064ecc26915a4e640b3a9bdaf5

compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1942,7 +1942,7 @@ __DEV__ &&
19421942
exports.useTransition = function () {
19431943
return resolveDispatcher().useTransition();
19441944
};
1945-
exports.version = "19.1.0-www-classic-de82912e-20241220";
1945+
exports.version = "19.1.0-www-classic-fe21c947-20250102";
19461946
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19471947
"function" ===
19481948
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1942,7 +1942,7 @@ __DEV__ &&
19421942
exports.useTransition = function () {
19431943
return resolveDispatcher().useTransition();
19441944
};
1945-
exports.version = "19.1.0-www-modern-de82912e-20241220";
1945+
exports.version = "19.1.0-www-modern-fe21c947-20250102";
19461946
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19471947
"function" ===
19481948
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-classic-de82912e-20241220";
633+
exports.version = "19.1.0-www-classic-fe21c947-20250102";

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-modern-de82912e-20241220";
633+
exports.version = "19.1.0-www-modern-fe21c947-20250102";

compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-classic-de82912e-20241220";
637+
exports.version = "19.1.0-www-classic-fe21c947-20250102";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-modern-de82912e-20241220";
637+
exports.version = "19.1.0-www-modern-fe21c947-20250102";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13119,7 +13119,7 @@ __DEV__ &&
1311913119
}
1312013120
null !== ReactSharedInternals.actQueue
1312113121
? workLoopSync()
13122-
: workLoopConcurrent();
13122+
: workLoopConcurrentByScheduler();
1312313123
break;
1312413124
} catch (thrownValue$35) {
1312513125
handleThrow(root, thrownValue$35);
@@ -13144,7 +13144,7 @@ __DEV__ &&
1314413144
finishQueueingConcurrentUpdates();
1314513145
return workInProgressRootExitStatus;
1314613146
}
13147-
function workLoopConcurrent() {
13147+
function workLoopConcurrentByScheduler() {
1314813148
for (; null !== workInProgress && !shouldYield(); )
1314913149
performUnitOfWork(workInProgress);
1315013150
}
@@ -16894,10 +16894,10 @@ __DEV__ &&
1689416894
(function () {
1689516895
var internals = {
1689616896
bundleType: 1,
16897-
version: "19.1.0-www-classic-de82912e-20241220",
16897+
version: "19.1.0-www-classic-fe21c947-20250102",
1689816898
rendererPackageName: "react-art",
1689916899
currentDispatcherRef: ReactSharedInternals,
16900-
reconcilerVersion: "19.1.0-www-classic-de82912e-20241220"
16900+
reconcilerVersion: "19.1.0-www-classic-fe21c947-20250102"
1690116901
};
1690216902
internals.overrideHookState = overrideHookState;
1690316903
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -16931,7 +16931,7 @@ __DEV__ &&
1693116931
exports.Shape = Shape;
1693216932
exports.Surface = Surface;
1693316933
exports.Text = Text;
16934-
exports.version = "19.1.0-www-classic-de82912e-20241220";
16934+
exports.version = "19.1.0-www-classic-fe21c947-20250102";
1693516935
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1693616936
"function" ===
1693716937
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12923,7 +12923,7 @@ __DEV__ &&
1292312923
}
1292412924
null !== ReactSharedInternals.actQueue
1292512925
? workLoopSync()
12926-
: workLoopConcurrent();
12926+
: workLoopConcurrentByScheduler();
1292712927
break;
1292812928
} catch (thrownValue$35) {
1292912929
handleThrow(root, thrownValue$35);
@@ -12948,7 +12948,7 @@ __DEV__ &&
1294812948
finishQueueingConcurrentUpdates();
1294912949
return workInProgressRootExitStatus;
1295012950
}
12951-
function workLoopConcurrent() {
12951+
function workLoopConcurrentByScheduler() {
1295212952
for (; null !== workInProgress && !shouldYield(); )
1295312953
performUnitOfWork(workInProgress);
1295412954
}
@@ -16657,10 +16657,10 @@ __DEV__ &&
1665716657
(function () {
1665816658
var internals = {
1665916659
bundleType: 1,
16660-
version: "19.1.0-www-modern-de82912e-20241220",
16660+
version: "19.1.0-www-modern-fe21c947-20250102",
1666116661
rendererPackageName: "react-art",
1666216662
currentDispatcherRef: ReactSharedInternals,
16663-
reconcilerVersion: "19.1.0-www-modern-de82912e-20241220"
16663+
reconcilerVersion: "19.1.0-www-modern-fe21c947-20250102"
1666416664
};
1666516665
internals.overrideHookState = overrideHookState;
1666616666
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -16694,7 +16694,7 @@ __DEV__ &&
1669416694
exports.Shape = Shape;
1669516695
exports.Surface = Surface;
1669616696
exports.Text = Text;
16697-
exports.version = "19.1.0-www-modern-de82912e-20241220";
16697+
exports.version = "19.1.0-www-modern-fe21c947-20250102";
1669816698
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1669916699
"function" ===
1670016700
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-prod.classic.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9739,7 +9739,7 @@ function renderRootConcurrent(root, lanes) {
97399739
throw Error(formatProdErrorMessage(462));
97409740
}
97419741
}
9742-
workLoopConcurrent();
9742+
workLoopConcurrentByScheduler();
97439743
break;
97449744
} catch (thrownValue$139) {
97459745
handleThrow(root, thrownValue$139);
@@ -9755,7 +9755,7 @@ function renderRootConcurrent(root, lanes) {
97559755
finishQueueingConcurrentUpdates();
97569756
return workInProgressRootExitStatus;
97579757
}
9758-
function workLoopConcurrent() {
9758+
function workLoopConcurrentByScheduler() {
97599759
for (; null !== workInProgress && !shouldYield(); )
97609760
performUnitOfWork(workInProgress);
97619761
}
@@ -10779,10 +10779,10 @@ var slice = Array.prototype.slice,
1077910779
})(React.Component);
1078010780
var internals$jscomp$inline_1501 = {
1078110781
bundleType: 0,
10782-
version: "19.1.0-www-classic-de82912e-20241220",
10782+
version: "19.1.0-www-classic-fe21c947-20250102",
1078310783
rendererPackageName: "react-art",
1078410784
currentDispatcherRef: ReactSharedInternals,
10785-
reconcilerVersion: "19.1.0-www-classic-de82912e-20241220"
10785+
reconcilerVersion: "19.1.0-www-classic-fe21c947-20250102"
1078610786
};
1078710787
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1078810788
var hook$jscomp$inline_1502 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10808,4 +10808,4 @@ exports.RadialGradient = RadialGradient;
1080810808
exports.Shape = TYPES.SHAPE;
1080910809
exports.Surface = Surface;
1081010810
exports.Text = Text;
10811-
exports.version = "19.1.0-www-classic-de82912e-20241220";
10811+
exports.version = "19.1.0-www-classic-fe21c947-20250102";

compiled/facebook-www/ReactART-prod.modern.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9499,7 +9499,7 @@ function renderRootConcurrent(root, lanes) {
94999499
throw Error(formatProdErrorMessage(462));
95009500
}
95019501
}
9502-
workLoopConcurrent();
9502+
workLoopConcurrentByScheduler();
95039503
break;
95049504
} catch (thrownValue$139) {
95059505
handleThrow(root, thrownValue$139);
@@ -9515,7 +9515,7 @@ function renderRootConcurrent(root, lanes) {
95159515
finishQueueingConcurrentUpdates();
95169516
return workInProgressRootExitStatus;
95179517
}
9518-
function workLoopConcurrent() {
9518+
function workLoopConcurrentByScheduler() {
95199519
for (; null !== workInProgress && !shouldYield(); )
95209520
performUnitOfWork(workInProgress);
95219521
}
@@ -10495,10 +10495,10 @@ var slice = Array.prototype.slice,
1049510495
})(React.Component);
1049610496
var internals$jscomp$inline_1480 = {
1049710497
bundleType: 0,
10498-
version: "19.1.0-www-modern-de82912e-20241220",
10498+
version: "19.1.0-www-modern-fe21c947-20250102",
1049910499
rendererPackageName: "react-art",
1050010500
currentDispatcherRef: ReactSharedInternals,
10501-
reconcilerVersion: "19.1.0-www-modern-de82912e-20241220"
10501+
reconcilerVersion: "19.1.0-www-modern-fe21c947-20250102"
1050210502
};
1050310503
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1050410504
var hook$jscomp$inline_1481 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10524,4 +10524,4 @@ exports.RadialGradient = RadialGradient;
1052410524
exports.Shape = TYPES.SHAPE;
1052510525
exports.Surface = Surface;
1052610526
exports.Text = Text;
10527-
exports.version = "19.1.0-www-modern-de82912e-20241220";
10527+
exports.version = "19.1.0-www-modern-fe21c947-20250102";

compiled/facebook-www/ReactDOM-dev.classic.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16251,7 +16251,7 @@ __DEV__ &&
1625116251
}
1625216252
null !== ReactSharedInternals.actQueue
1625316253
? workLoopSync()
16254-
: workLoopConcurrent();
16254+
: workLoopConcurrentByScheduler();
1625516255
break;
1625616256
} catch (thrownValue$39) {
1625716257
handleThrow(root, thrownValue$39);
@@ -16276,7 +16276,7 @@ __DEV__ &&
1627616276
finishQueueingConcurrentUpdates();
1627716277
return workInProgressRootExitStatus;
1627816278
}
16279-
function workLoopConcurrent() {
16279+
function workLoopConcurrentByScheduler() {
1628016280
for (; null !== workInProgress && !shouldYield(); )
1628116281
performUnitOfWork(workInProgress);
1628216282
}
@@ -27374,11 +27374,11 @@ __DEV__ &&
2737427374
return_targetInst = null;
2737527375
(function () {
2737627376
var isomorphicReactPackageVersion = React.version;
27377-
if ("19.1.0-www-classic-de82912e-20241220" !== isomorphicReactPackageVersion)
27377+
if ("19.1.0-www-classic-fe21c947-20250102" !== isomorphicReactPackageVersion)
2737827378
throw Error(
2737927379
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2738027380
(isomorphicReactPackageVersion +
27381-
"\n - react-dom: 19.1.0-www-classic-de82912e-20241220\nLearn more: https://react.dev/warnings/version-mismatch")
27381+
"\n - react-dom: 19.1.0-www-classic-fe21c947-20250102\nLearn more: https://react.dev/warnings/version-mismatch")
2738227382
);
2738327383
})();
2738427384
("function" === typeof Map &&
@@ -27421,10 +27421,10 @@ __DEV__ &&
2742127421
!(function () {
2742227422
var internals = {
2742327423
bundleType: 1,
27424-
version: "19.1.0-www-classic-de82912e-20241220",
27424+
version: "19.1.0-www-classic-fe21c947-20250102",
2742527425
rendererPackageName: "react-dom",
2742627426
currentDispatcherRef: ReactSharedInternals,
27427-
reconcilerVersion: "19.1.0-www-classic-de82912e-20241220"
27427+
reconcilerVersion: "19.1.0-www-classic-fe21c947-20250102"
2742827428
};
2742927429
internals.overrideHookState = overrideHookState;
2743027430
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -28022,7 +28022,7 @@ __DEV__ &&
2802228022
exports.useFormStatus = function () {
2802328023
return resolveDispatcher().useHostTransitionStatus();
2802428024
};
28025-
exports.version = "19.1.0-www-classic-de82912e-20241220";
28025+
exports.version = "19.1.0-www-classic-fe21c947-20250102";
2802628026
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
2802728027
"function" ===
2802828028
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactDOM-dev.modern.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16050,7 +16050,7 @@ __DEV__ &&
1605016050
}
1605116051
null !== ReactSharedInternals.actQueue
1605216052
? workLoopSync()
16053-
: workLoopConcurrent();
16053+
: workLoopConcurrentByScheduler();
1605416054
break;
1605516055
} catch (thrownValue$39) {
1605616056
handleThrow(root, thrownValue$39);
@@ -16075,7 +16075,7 @@ __DEV__ &&
1607516075
finishQueueingConcurrentUpdates();
1607616076
return workInProgressRootExitStatus;
1607716077
}
16078-
function workLoopConcurrent() {
16078+
function workLoopConcurrentByScheduler() {
1607916079
for (; null !== workInProgress && !shouldYield(); )
1608016080
performUnitOfWork(workInProgress);
1608116081
}
@@ -27153,11 +27153,11 @@ __DEV__ &&
2715327153
return_targetInst = null;
2715427154
(function () {
2715527155
var isomorphicReactPackageVersion = React.version;
27156-
if ("19.1.0-www-modern-de82912e-20241220" !== isomorphicReactPackageVersion)
27156+
if ("19.1.0-www-modern-fe21c947-20250102" !== isomorphicReactPackageVersion)
2715727157
throw Error(
2715827158
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2715927159
(isomorphicReactPackageVersion +
27160-
"\n - react-dom: 19.1.0-www-modern-de82912e-20241220\nLearn more: https://react.dev/warnings/version-mismatch")
27160+
"\n - react-dom: 19.1.0-www-modern-fe21c947-20250102\nLearn more: https://react.dev/warnings/version-mismatch")
2716127161
);
2716227162
})();
2716327163
("function" === typeof Map &&
@@ -27200,10 +27200,10 @@ __DEV__ &&
2720027200
!(function () {
2720127201
var internals = {
2720227202
bundleType: 1,
27203-
version: "19.1.0-www-modern-de82912e-20241220",
27203+
version: "19.1.0-www-modern-fe21c947-20250102",
2720427204
rendererPackageName: "react-dom",
2720527205
currentDispatcherRef: ReactSharedInternals,
27206-
reconcilerVersion: "19.1.0-www-modern-de82912e-20241220"
27206+
reconcilerVersion: "19.1.0-www-modern-fe21c947-20250102"
2720727207
};
2720827208
internals.overrideHookState = overrideHookState;
2720927209
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -27801,7 +27801,7 @@ __DEV__ &&
2780127801
exports.useFormStatus = function () {
2780227802
return resolveDispatcher().useHostTransitionStatus();
2780327803
};
27804-
exports.version = "19.1.0-www-modern-de82912e-20241220";
27804+
exports.version = "19.1.0-www-modern-fe21c947-20250102";
2780527805
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
2780627806
"function" ===
2780727807
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactDOM-prod.classic.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11611,7 +11611,7 @@ function renderRootConcurrent(root, lanes) {
1161111611
throw Error(formatProdErrorMessage(462));
1161211612
}
1161311613
}
11614-
workLoopConcurrent();
11614+
workLoopConcurrentByScheduler();
1161511615
break;
1161611616
} catch (thrownValue$192) {
1161711617
handleThrow(root, thrownValue$192);
@@ -11627,7 +11627,7 @@ function renderRootConcurrent(root, lanes) {
1162711627
finishQueueingConcurrentUpdates();
1162811628
return workInProgressRootExitStatus;
1162911629
}
11630-
function workLoopConcurrent() {
11630+
function workLoopConcurrentByScheduler() {
1163111631
for (; null !== workInProgress && !shouldYield(); )
1163211632
performUnitOfWork(workInProgress);
1163311633
}
@@ -17244,14 +17244,14 @@ function getCrossOriginStringAs(as, input) {
1724417244
}
1724517245
var isomorphicReactPackageVersion$jscomp$inline_1770 = React.version;
1724617246
if (
17247-
"19.1.0-www-classic-de82912e-20241220" !==
17247+
"19.1.0-www-classic-fe21c947-20250102" !==
1724817248
isomorphicReactPackageVersion$jscomp$inline_1770
1724917249
)
1725017250
throw Error(
1725117251
formatProdErrorMessage(
1725217252
527,
1725317253
isomorphicReactPackageVersion$jscomp$inline_1770,
17254-
"19.1.0-www-classic-de82912e-20241220"
17254+
"19.1.0-www-classic-fe21c947-20250102"
1725517255
)
1725617256
);
1725717257
Internals.findDOMNode = function (componentOrElement) {
@@ -17269,10 +17269,10 @@ Internals.Events = [
1726917269
];
1727017270
var internals$jscomp$inline_2307 = {
1727117271
bundleType: 0,
17272-
version: "19.1.0-www-classic-de82912e-20241220",
17272+
version: "19.1.0-www-classic-fe21c947-20250102",
1727317273
rendererPackageName: "react-dom",
1727417274
currentDispatcherRef: ReactSharedInternals,
17275-
reconcilerVersion: "19.1.0-www-classic-de82912e-20241220"
17275+
reconcilerVersion: "19.1.0-www-classic-fe21c947-20250102"
1727617276
};
1727717277
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1727817278
var hook$jscomp$inline_2308 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17637,4 +17637,4 @@ exports.useFormState = function (action, initialState, permalink) {
1763717637
exports.useFormStatus = function () {
1763817638
return ReactSharedInternals.H.useHostTransitionStatus();
1763917639
};
17640-
exports.version = "19.1.0-www-classic-de82912e-20241220";
17640+
exports.version = "19.1.0-www-classic-fe21c947-20250102";

0 commit comments

Comments
 (0)