@samitouri / QOS-React-1 / commits / 7ac8e61211

Only log component level profiling for components that actually performed work (#31522)

This provides less context but skips a lot of noise. Previously we were including parent components to provide context about what is rendering but this turns out to be: 1) Very expensive due to the overhead of `performance.measure()` while profiling. 2) Unactionable noise in the profile that hurt more than it added in real apps with large trees. This approach instead just add performance.measure calls for each component that was marked as PerformedWork (which was used for this purpose by React Profiler) or had any Effects. Not everything gets marked with PerformedWork though. E.g. DOM nodes do not but they can have significant render times since creating them takes time. We might consider including them if a self-time threshold is met. Because there is little to no context about the component anymore it becomes really essential to get a feature from Chrome DevTools that can link to something with more context like React DevTools.

Sebastian Markbåge committed Nov 13, 2024 at 10:57 UTC 7ac8e612118a1285ac6aa0bb333d910b9f23a7ad
1 file changed +11 -5
packages/react-reconciler/src/ReactFiberCommitWork.js
+11 -5
@@ -97,6 +97,7 @@ import {
97 MaySuspendCommit,
98 FormReset,
99 Cloned,
100 + PerformedWork,
101 } from './ReactFiberFlags';
102 import {
103 commitStartTime,
@@ -602,7 +603,8 @@ function commitLayoutEffectOnFiber(
603 enableComponentPerformanceTrack &&
604 (finishedWork.mode & ProfileMode) !== NoMode &&
605 componentEffectStartTime >= 0 &&
605 - componentEffectEndTime >= 0
606 + componentEffectEndTime >= 0 &&
607 + componentEffectDuration > 0.05
608 ) {
609 logComponentEffect(
610 finishedWork,
@@ -2106,7 +2108,8 @@ function commitMutationEffectsOnFiber(
2108 enableComponentPerformanceTrack &&
2109 (finishedWork.mode & ProfileMode) !== NoMode &&
2110 componentEffectStartTime >= 0 &&
2109 - componentEffectEndTime >= 0
2111 + componentEffectEndTime >= 0 &&
2112 + componentEffectDuration > 0.05
2113 ) {
2114 logComponentEffect(
2115 finishedWork,
@@ -2647,7 +2650,8 @@ function commitPassiveMountOnFiber(
2650 enableProfilerTimer &&
2651 enableComponentPerformanceTrack &&
2652 (finishedWork.mode & ProfileMode) !== NoMode &&
2650 - ((finishedWork.actualStartTime: any): number) > 0
2653 + ((finishedWork.actualStartTime: any): number) > 0 &&
2654 + (finishedWork.flags & PerformedWork) !== NoFlags
2655 ) {
2656 logComponentRender(
2657 finishedWork,
@@ -2929,7 +2933,8 @@ function commitPassiveMountOnFiber(
2933 enableComponentPerformanceTrack &&
2934 (finishedWork.mode & ProfileMode) !== NoMode &&
2935 componentEffectStartTime >= 0 &&
2932 - componentEffectEndTime >= 0
2936 + componentEffectEndTime >= 0 &&
2937 + componentEffectDuration > 0.05
2938 ) {
2939 logComponentEffect(
2940 finishedWork,
@@ -3448,7 +3453,8 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
3453 enableComponentPerformanceTrack &&
3454 (finishedWork.mode & ProfileMode) !== NoMode &&
3455 componentEffectStartTime >= 0 &&
3451 - componentEffectEndTime >= 0
3456 + componentEffectEndTime >= 0 &&
3457 + componentEffectDuration > 0.05
3458 ) {
3459 logComponentEffect(
3460 finishedWork,