Skip to content

Commit 1aa95c1

Browse files
sebmarkbagesebmarkbage
committed
[Fiber] Log the Render/Commit phases and the gaps in between (#31016)
A slight behavior change here too is that I now mark the start of the commit phase before the BeforeMutationEffect phase. This affects `<Profiler>` too. The named sequences are as follows: Render -> Suspended or Throttled -> Commit -> Waiting for Paint -> Remaining Effects The Suspended phase is only logged if we delay the Commit due to CSS / images. The Throttled phase is only logged if we delay the commit due to the Suspense throttling timer. <img width="1246" alt="Screenshot 2024-09-20 at 9 14 23 PM" src="https://github.com/user-attachments/assets/8d01f444-bb85-472b-9b42-6157d92c81b4"> I don't yet log render phases that don't complete. I think I also need to special case renders that or don't commit after being suspended. DiffTrain build for commit 4e9540e.
1 parent 7afe7c4 commit 1aa95c1

23 files changed

+1186
-793
lines changed

‎compiled-rn/VERSION_NATIVE_FB

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.0.0-native-fb-d4688dfa-20240920
1+
19.0.0-native-fb-4e9540e3-20240923

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/ReactDOM-dev.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<cd7d2989689cea3ea4b5c406a55ba4a4>>
10+
* @generated SignedSource<<80233c54826ea2892044a0ed2a5a8729>>
1111
*/
1212

1313
"use strict";
@@ -420,5 +420,5 @@ __DEV__ &&
420420
exports.useFormStatus = function () {
421421
return resolveDispatcher().useHostTransitionStatus();
422422
};
423-
exports.version = "19.0.0-native-fb-d4688dfa-20240920";
423+
exports.version = "19.0.0-native-fb-4e9540e3-20240923";
424424
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/ReactDOM-prod.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<1ccdf7ee120145b96321030477a1a1cc>>
10+
* @generated SignedSource<<bdb71122488c8ca8070411cd627e7436>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.0.0-native-fb-d4688dfa-20240920";
206+
exports.version = "19.0.0-native-fb-4e9540e3-20240923";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/ReactDOM-profiling.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<1ccdf7ee120145b96321030477a1a1cc>>
10+
* @generated SignedSource<<bdb71122488c8ca8070411cd627e7436>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.0.0-native-fb-d4688dfa-20240920";
206+
exports.version = "19.0.0-native-fb-4e9540e3-20240923";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/ReactDOMClient-dev.js

+229-195
Large diffs are not rendered by default.

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/ReactDOMClient-prod.js

+59-37
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<06640c38668cc76f696e292db046365f>>
10+
* @generated SignedSource<<eb5524b46e9c3557cecde195fcf94930>>
1111
*/
1212

1313
/*
@@ -10997,7 +10997,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
1099710997
workInProgressDeferredLane,
1099810998
workInProgressRootInterleavedUpdatedLanes,
1099910999
workInProgressSuspendedRetryLanes,
11000-
workInProgressRootDidSkipSuspendedSiblings
11000+
workInProgressRootDidSkipSuspendedSiblings,
11001+
2,
11002+
-0,
11003+
0
1100111004
),
1100211005
exitStatus
1100311006
);
@@ -11013,7 +11016,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
1101311016
workInProgressDeferredLane,
1101411017
workInProgressRootInterleavedUpdatedLanes,
1101511018
workInProgressSuspendedRetryLanes,
11016-
workInProgressRootDidSkipSuspendedSiblings
11019+
workInProgressRootDidSkipSuspendedSiblings,
11020+
0,
11021+
-0,
11022+
0
1101711023
);
1101811024
}
1101911025
}
@@ -11068,7 +11074,10 @@ function commitRootWhenReady(
1106811074
spawnedLane,
1106911075
updatedLanes,
1107011076
suspendedRetryLanes,
11071-
didSkipSuspendedSiblings
11077+
didSkipSuspendedSiblings,
11078+
suspendedCommitReason,
11079+
completedRenderStartTime,
11080+
completedRenderEndTime
1107211081
) {
1107311082
var subtreeFlags = finishedWork.subtreeFlags;
1107411083
if (subtreeFlags & 8192 || 16785408 === (subtreeFlags & 16785408))
@@ -11087,7 +11096,8 @@ function commitRootWhenReady(
1108711096
didIncludeRenderPhaseUpdate,
1108811097
spawnedLane,
1108911098
updatedLanes,
11090-
suspendedRetryLanes
11099+
suspendedRetryLanes,
11100+
1
1109111101
)
1109211102
);
1109311103
markRootSuspended(root, lanes, spawnedLane, didSkipSuspendedSiblings);
@@ -11100,7 +11110,10 @@ function commitRootWhenReady(
1110011110
didIncludeRenderPhaseUpdate,
1110111111
spawnedLane,
1110211112
updatedLanes,
11103-
suspendedRetryLanes
11113+
suspendedRetryLanes,
11114+
suspendedCommitReason,
11115+
completedRenderStartTime,
11116+
completedRenderEndTime
1110411117
);
1110511118
}
1110611119
function isRenderConsistentWithExternalStores(finishedWork) {
@@ -11212,7 +11225,10 @@ function performSyncWorkOnRoot(root, lanes) {
1121211225
workInProgressRootDidIncludeRecursiveRenderUpdate,
1121311226
workInProgressDeferredLane,
1121411227
workInProgressRootInterleavedUpdatedLanes,
11215-
workInProgressSuspendedRetryLanes
11228+
workInProgressSuspendedRetryLanes,
11229+
0,
11230+
-0,
11231+
0
1121611232
);
1121711233
ensureRootIsScheduled(root);
1121811234
return null;
@@ -11692,7 +11708,10 @@ function commitRoot(
1169211708
didIncludeRenderPhaseUpdate,
1169311709
spawnedLane,
1169411710
updatedLanes,
11695-
suspendedRetryLanes
11711+
suspendedRetryLanes,
11712+
suspendedCommitReason,
11713+
completedRenderStartTime,
11714+
completedRenderEndTime
1169611715
) {
1169711716
var prevTransition = ReactSharedInternals.T,
1169811717
previousUpdateLanePriority = ReactDOMSharedInternals.p;
@@ -11707,7 +11726,10 @@ function commitRoot(
1170711726
previousUpdateLanePriority,
1170811727
spawnedLane,
1170911728
updatedLanes,
11710-
suspendedRetryLanes
11729+
suspendedRetryLanes,
11730+
suspendedCommitReason,
11731+
completedRenderStartTime,
11732+
completedRenderEndTime
1171111733
);
1171211734
} finally {
1171311735
(ReactSharedInternals.T = prevTransition),
@@ -11758,7 +11780,7 @@ function commitRootImpl(
1175811780
(pendingPassiveEffectsRemainingLanes = remainingLanes),
1175911781
(pendingPassiveTransitions = transitions),
1176011782
scheduleCallback$1(NormalPriority$1, function () {
11761-
flushPassiveEffects();
11783+
flushPassiveEffects(!0);
1176211784
return null;
1176311785
}));
1176411786
transitions = 0 !== (finishedWork.flags & 15990);
@@ -12262,20 +12284,20 @@ function extractEvents$1(
1226212284
}
1226312285
}
1226412286
for (
12265-
var i$jscomp$inline_1450 = 0;
12266-
i$jscomp$inline_1450 < simpleEventPluginEvents.length;
12267-
i$jscomp$inline_1450++
12287+
var i$jscomp$inline_1453 = 0;
12288+
i$jscomp$inline_1453 < simpleEventPluginEvents.length;
12289+
i$jscomp$inline_1453++
1226812290
) {
12269-
var eventName$jscomp$inline_1451 =
12270-
simpleEventPluginEvents[i$jscomp$inline_1450],
12271-
domEventName$jscomp$inline_1452 =
12272-
eventName$jscomp$inline_1451.toLowerCase(),
12273-
capitalizedEvent$jscomp$inline_1453 =
12274-
eventName$jscomp$inline_1451[0].toUpperCase() +
12275-
eventName$jscomp$inline_1451.slice(1);
12291+
var eventName$jscomp$inline_1454 =
12292+
simpleEventPluginEvents[i$jscomp$inline_1453],
12293+
domEventName$jscomp$inline_1455 =
12294+
eventName$jscomp$inline_1454.toLowerCase(),
12295+
capitalizedEvent$jscomp$inline_1456 =
12296+
eventName$jscomp$inline_1454[0].toUpperCase() +
12297+
eventName$jscomp$inline_1454.slice(1);
1227612298
registerSimpleEvent(
12277-
domEventName$jscomp$inline_1452,
12278-
"on" + capitalizedEvent$jscomp$inline_1453
12299+
domEventName$jscomp$inline_1455,
12300+
"on" + capitalizedEvent$jscomp$inline_1456
1227912301
);
1228012302
}
1228112303
registerSimpleEvent(ANIMATION_END, "onAnimationEnd");
@@ -15745,16 +15767,16 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1574515767
0 === i && attemptExplicitHydrationTarget(target);
1574615768
}
1574715769
};
15748-
var isomorphicReactPackageVersion$jscomp$inline_1693 = React.version;
15770+
var isomorphicReactPackageVersion$jscomp$inline_1696 = React.version;
1574915771
if (
15750-
"19.0.0-native-fb-d4688dfa-20240920" !==
15751-
isomorphicReactPackageVersion$jscomp$inline_1693
15772+
"19.0.0-native-fb-4e9540e3-20240923" !==
15773+
isomorphicReactPackageVersion$jscomp$inline_1696
1575215774
)
1575315775
throw Error(
1575415776
formatProdErrorMessage(
1575515777
527,
15756-
isomorphicReactPackageVersion$jscomp$inline_1693,
15757-
"19.0.0-native-fb-d4688dfa-20240920"
15778+
isomorphicReactPackageVersion$jscomp$inline_1696,
15779+
"19.0.0-native-fb-4e9540e3-20240923"
1575815780
)
1575915781
);
1576015782
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -15774,25 +15796,25 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1577415796
null === componentOrElement ? null : componentOrElement.stateNode;
1577515797
return componentOrElement;
1577615798
};
15777-
var internals$jscomp$inline_2131 = {
15799+
var internals$jscomp$inline_2134 = {
1577815800
bundleType: 0,
15779-
version: "19.0.0-native-fb-d4688dfa-20240920",
15801+
version: "19.0.0-native-fb-4e9540e3-20240923",
1578015802
rendererPackageName: "react-dom",
1578115803
currentDispatcherRef: ReactSharedInternals,
1578215804
findFiberByHostInstance: getClosestInstanceFromNode,
15783-
reconcilerVersion: "19.0.0-native-fb-d4688dfa-20240920"
15805+
reconcilerVersion: "19.0.0-native-fb-4e9540e3-20240923"
1578415806
};
1578515807
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
15786-
var hook$jscomp$inline_2132 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
15808+
var hook$jscomp$inline_2135 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
1578715809
if (
15788-
!hook$jscomp$inline_2132.isDisabled &&
15789-
hook$jscomp$inline_2132.supportsFiber
15810+
!hook$jscomp$inline_2135.isDisabled &&
15811+
hook$jscomp$inline_2135.supportsFiber
1579015812
)
1579115813
try {
15792-
(rendererID = hook$jscomp$inline_2132.inject(
15793-
internals$jscomp$inline_2131
15814+
(rendererID = hook$jscomp$inline_2135.inject(
15815+
internals$jscomp$inline_2134
1579415816
)),
15795-
(injectedHook = hook$jscomp$inline_2132);
15817+
(injectedHook = hook$jscomp$inline_2135);
1579615818
} catch (err) {}
1579715819
}
1579815820
exports.createRoot = function (container, options) {
@@ -15884,4 +15906,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1588415906
listenToAllSupportedEvents(container);
1588515907
return new ReactDOMHydrationRoot(initialChildren);
1588615908
};
15887-
exports.version = "19.0.0-native-fb-d4688dfa-20240920";
15909+
exports.version = "19.0.0-native-fb-4e9540e3-20240923";

0 commit comments

Comments
 (0)