Skip to content

Commit 4c73996

Browse files
sebmarkbagesebmarkbage
committed
[Fiber] Log Component Renders to Custom Performance Track (#30967)
Stacked on #30960 and #30966. Behind the enableComponentPerformanceTrack flag. This is the first step of performance logging. This logs the start and end time of a component render in the passive effect phase. We use the data we're already tracking on components when the Profiler component or DevTools is active in the Profiling or Dev builds. By backdating this after committing we avoid adding more overhead in the hot path. By only logging things that actually committed, we avoid the costly unwinding of an interrupted render which was hard to maintain in earlier versions. We already have the start time but we don't have the end time. That's because `actualStartTime + actualDuration` isn't enough since `actualDuration` counts the actual CPU time excluding yields and suspending in the render. Instead, we infer the end time to be the start time of the next sibling or the complete time of the whole root if there are no more siblings. We need to pass this down the passive effect tree. This will mean that any overhead and yields are attributed to this component's span. In a follow up, we'll need to start logging these yields to make it clear that this is not part of the component's self-time. In follow ups, I'll do the same for commit phases. We'll also need to log more information about the phases in the top track. We'll also need to filter out more components from the trees that we don't need to highlight like the internal Offscreen components. It also needs polish on colors etc. Currently, I place the components into separate tracks depending on which lane currently committed. That way you can see what was blocking Transitions or Suspense etc. One problem that I've hit with the new performance.measure extensions is that these tracks show up in the order they're used which is not the order of priority that we use. Even when you add fake markers they have to actually be within the performance run since otherwise the calls are noops so it's not enough to do that once. However, I think this visualization is actually not good because these trees end up so large that you can't see any other lanes once you expand one. Therefore, I think in a follow up I'll actually instead switch to a model where Components is a single track regardless of lane since we don't currently have overlap anyway. Then the description about what is actually rendering can be separate lanes. <img width="1512" alt="Screenshot 2024-09-15 at 10 55 55 PM" src="https://github.com/user-attachments/assets/5ca3fa74-97ce-40c7-97f7-80c1dd7d6470"> <img width="1512" alt="Screenshot 2024-09-15 at 10 56 27 PM" src="https://github.com/user-attachments/assets/557ad65b-4190-465f-843c-0bc6cbb9326d"> DiffTrain build for commit f2df569.
1 parent a2e2949 commit 4c73996

File tree

14 files changed

+86
-116
lines changed

14 files changed

+86
-116
lines changed

‎compiled-rn/VERSION_NATIVE_FB

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.0.0-native-fb-ee1a403a-20240916
1+
19.0.0-native-fb-f2df5694-20240916

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<bda351a6bd74d56044bd86d2d6462273>>
10+
* @generated SignedSource<<40679ac3de121003b93c964de30bcf93>>
1111
*/
1212

1313
"use strict";
@@ -11605,25 +11605,16 @@ __DEV__ &&
1160511605
}
1160611606
var current = completedWork.alternate;
1160711607
unitOfWork = completedWork.return;
11608-
0 === (completedWork.mode & 2)
11609-
? (current = runWithFiberInDEV(
11610-
completedWork,
11611-
completeWork,
11612-
current,
11613-
completedWork,
11614-
entangledRenderLanes
11615-
))
11616-
: (startProfilerTimer(completedWork),
11617-
(current = runWithFiberInDEV(
11618-
completedWork,
11619-
completeWork,
11620-
current,
11621-
completedWork,
11622-
entangledRenderLanes
11623-
)),
11624-
stopProfilerTimerIfRunningAndRecordIncompleteDuration(
11625-
completedWork
11626-
));
11608+
startProfilerTimer(completedWork);
11609+
current = runWithFiberInDEV(
11610+
completedWork,
11611+
completeWork,
11612+
current,
11613+
completedWork,
11614+
entangledRenderLanes
11615+
);
11616+
0 !== (completedWork.mode & 2) &&
11617+
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
1162711618
if (null !== current) {
1162811619
workInProgress = current;
1162911620
return;
@@ -15140,11 +15131,11 @@ __DEV__ &&
1514015131
(function () {
1514115132
var internals = {
1514215133
bundleType: 1,
15143-
version: "19.0.0-native-fb-ee1a403a-20240916",
15134+
version: "19.0.0-native-fb-f2df5694-20240916",
1514415135
rendererPackageName: "react-test-renderer",
1514515136
currentDispatcherRef: ReactSharedInternals,
1514615137
findFiberByHostInstance: getInstanceFromNode,
15147-
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
15138+
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
1514815139
};
1514915140
internals.overrideHookState = overrideHookState;
1515015141
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -15289,5 +15280,5 @@ __DEV__ &&
1528915280
flushSyncWorkAcrossRoots_impl(0, !0));
1529015281
}
1529115282
};
15292-
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
15283+
exports.version = "19.0.0-native-fb-f2df5694-20240916";
1529315284
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<ee4a02b5426c54dfb9fe96edd4b66161>>
10+
* @generated SignedSource<<9a9fb251219beceaeffc6b69776d3434>>
1111
*/
1212

1313
"use strict";
@@ -9494,14 +9494,14 @@ function wrapFiber(fiber) {
94949494
}
94959495
var internals$jscomp$inline_1266 = {
94969496
bundleType: 0,
9497-
version: "19.0.0-native-fb-ee1a403a-20240916",
9497+
version: "19.0.0-native-fb-f2df5694-20240916",
94989498
rendererPackageName: "react-test-renderer",
94999499
currentDispatcherRef: ReactSharedInternals,
95009500
findFiberByHostInstance: function (mockNode) {
95019501
mockNode = nodeToInstanceMap.get(mockNode);
95029502
return void 0 !== mockNode ? mockNode.internalInstanceHandle : null;
95039503
},
9504-
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
9504+
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
95059505
};
95069506
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
95079507
var hook$jscomp$inline_1267 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9637,4 +9637,4 @@ exports.unstable_batchedUpdates = function (fn, a) {
96379637
flushSyncWorkAcrossRoots_impl(0, !0));
96389638
}
96399639
};
9640-
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
9640+
exports.version = "19.0.0-native-fb-f2df5694-20240916";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<148286d52fdfff50aaf8f615ce1cc99d>>
10+
* @generated SignedSource<<a850c1d37ecaa9e50bd6abf532024fd1>>
1111
*/
1212

1313
"use strict";
@@ -8973,11 +8973,10 @@ function completeUnitOfWork(unitOfWork) {
89738973
}
89748974
var current = completedWork.alternate;
89758975
unitOfWork = completedWork.return;
8976-
0 === (completedWork.mode & 2)
8977-
? (current = completeWork(current, completedWork, entangledRenderLanes))
8978-
: (startProfilerTimer(completedWork),
8979-
(current = completeWork(current, completedWork, entangledRenderLanes)),
8980-
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork));
8976+
startProfilerTimer(completedWork);
8977+
current = completeWork(current, completedWork, entangledRenderLanes);
8978+
0 !== (completedWork.mode & 2) &&
8979+
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
89818980
if (null !== current) {
89828981
workInProgress = current;
89838982
return;
@@ -10067,14 +10066,14 @@ function wrapFiber(fiber) {
1006710066
}
1006810067
var internals$jscomp$inline_1144 = {
1006910068
bundleType: 0,
10070-
version: "19.0.0-native-fb-ee1a403a-20240916",
10069+
version: "19.0.0-native-fb-f2df5694-20240916",
1007110070
rendererPackageName: "react-test-renderer",
1007210071
currentDispatcherRef: ReactSharedInternals,
1007310072
findFiberByHostInstance: function (mockNode) {
1007410073
mockNode = nodeToInstanceMap.get(mockNode);
1007510074
return void 0 !== mockNode ? mockNode.internalInstanceHandle : null;
1007610075
},
10077-
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916",
10076+
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916",
1007810077
getLaneLabelMap: function () {
1007910078
for (
1008010079
var map = new Map(), lane = 1, index$137 = 0;
@@ -10225,4 +10224,4 @@ exports.unstable_batchedUpdates = function (fn, a) {
1022510224
flushSyncWorkAcrossRoots_impl(0, !0));
1022610225
}
1022710226
};
10228-
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
10227+
exports.version = "19.0.0-native-fb-f2df5694-20240916";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<91a77775e387cb297cc53a2299fa7817>>
10+
* @generated SignedSource<<1c1b9763e7b42284daff249459a54514>>
1111
*/
1212

1313
"use strict";
@@ -1705,7 +1705,7 @@ __DEV__ &&
17051705
exports.useTransition = function () {
17061706
return resolveDispatcher().useTransition();
17071707
};
1708-
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
1708+
exports.version = "19.0.0-native-fb-f2df5694-20240916";
17091709
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
17101710
"function" ===
17111711
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<2536265a79e4e86f341da6a1b5221361>>
10+
* @generated SignedSource<<e678c9ab4742aa7571f90a33fc0dfaa6>>
1111
*/
1212

1313
"use strict";
@@ -580,4 +580,4 @@ exports.useSyncExternalStore = function (
580580
exports.useTransition = function () {
581581
return ReactSharedInternals.H.useTransition();
582582
};
583-
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
583+
exports.version = "19.0.0-native-fb-f2df5694-20240916";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<91f824f51eabcd1c2ea47371eea0f9aa>>
10+
* @generated SignedSource<<0f502daf85a556bae5016204bf6af630>>
1111
*/
1212

1313
"use strict";
@@ -584,7 +584,7 @@ exports.useSyncExternalStore = function (
584584
exports.useTransition = function () {
585585
return ReactSharedInternals.H.useTransition();
586586
};
587-
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
587+
exports.version = "19.0.0-native-fb-f2df5694-20240916";
588588
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
589589
"function" ===
590590
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ee1a403a3019dd8bffb12174d269d8c85bfab8a1
1+
f2df5694f2be141954f22618fd3ad035203241a3

‎compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<61b41ac0200620cb757aa1d27f6fbc6d>>
10+
* @generated SignedSource<<5ba7f2de6a46de16f61e9f39daee3a39>>
1111
*/
1212

1313
"use strict";
@@ -12810,25 +12810,16 @@ __DEV__ &&
1281012810
}
1281112811
var current = completedWork.alternate;
1281212812
unitOfWork = completedWork.return;
12813-
0 === (completedWork.mode & 2)
12814-
? (current = runWithFiberInDEV(
12815-
completedWork,
12816-
completeWork,
12817-
current,
12818-
completedWork,
12819-
entangledRenderLanes
12820-
))
12821-
: (startProfilerTimer(completedWork),
12822-
(current = runWithFiberInDEV(
12823-
completedWork,
12824-
completeWork,
12825-
current,
12826-
completedWork,
12827-
entangledRenderLanes
12828-
)),
12829-
stopProfilerTimerIfRunningAndRecordIncompleteDuration(
12830-
completedWork
12831-
));
12813+
startProfilerTimer(completedWork);
12814+
current = runWithFiberInDEV(
12815+
completedWork,
12816+
completeWork,
12817+
current,
12818+
completedWork,
12819+
entangledRenderLanes
12820+
);
12821+
0 !== (completedWork.mode & 2) &&
12822+
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
1283212823
if (null !== current) {
1283312824
workInProgress = current;
1283412825
return;
@@ -17189,11 +17180,11 @@ __DEV__ &&
1718917180
(function () {
1719017181
var internals = {
1719117182
bundleType: 1,
17192-
version: "19.0.0-native-fb-ee1a403a-20240916",
17183+
version: "19.0.0-native-fb-f2df5694-20240916",
1719317184
rendererPackageName: "react-native-renderer",
1719417185
currentDispatcherRef: ReactSharedInternals,
1719517186
findFiberByHostInstance: getInstanceFromNode,
17196-
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
17187+
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
1719717188
};
1719817189
null !== extraDevToolsConfig &&
1719917190
(internals.rendererConfig = extraDevToolsConfig);

‎compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<7f9e61ef45310ef46f7d0986a6e32f98>>
10+
* @generated SignedSource<<22685561eb8e04f40bed9d1b32d45795>>
1111
*/
1212

1313
"use strict";
@@ -11085,11 +11085,11 @@ batchedUpdatesImpl = function (fn, a) {
1108511085
var roots = new Map(),
1108611086
internals$jscomp$inline_1164 = {
1108711087
bundleType: 0,
11088-
version: "19.0.0-native-fb-ee1a403a-20240916",
11088+
version: "19.0.0-native-fb-f2df5694-20240916",
1108911089
rendererPackageName: "react-native-renderer",
1109011090
currentDispatcherRef: ReactSharedInternals,
1109111091
findFiberByHostInstance: getInstanceFromNode,
11092-
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
11092+
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
1109311093
};
1109411094
null !== extraDevToolsConfig &&
1109511095
(internals$jscomp$inline_1164.rendererConfig = extraDevToolsConfig);

0 commit comments

Comments
 (0)