From 7ac8e612118a1285ac6aa0bb333d910b9f23a7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 13 Nov 2024 10:57:15 -0500
Subject: [PATCH] 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.
---
 .../react-reconciler/src/ReactFiberCommitWork.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 9384f5cbd574b..5c64a0407048e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -97,6 +97,7 @@ import {
   MaySuspendCommit,
   FormReset,
   Cloned,
+  PerformedWork,
 } from './ReactFiberFlags';
 import {
   commitStartTime,
@@ -602,7 +603,8 @@ function commitLayoutEffectOnFiber(
     enableComponentPerformanceTrack &&
     (finishedWork.mode & ProfileMode) !== NoMode &&
     componentEffectStartTime >= 0 &&
-    componentEffectEndTime >= 0
+    componentEffectEndTime >= 0 &&
+    componentEffectDuration > 0.05
   ) {
     logComponentEffect(
       finishedWork,
@@ -2106,7 +2108,8 @@ function commitMutationEffectsOnFiber(
     enableComponentPerformanceTrack &&
     (finishedWork.mode & ProfileMode) !== NoMode &&
     componentEffectStartTime >= 0 &&
-    componentEffectEndTime >= 0
+    componentEffectEndTime >= 0 &&
+    componentEffectDuration > 0.05
   ) {
     logComponentEffect(
       finishedWork,
@@ -2647,7 +2650,8 @@ function commitPassiveMountOnFiber(
     enableProfilerTimer &&
     enableComponentPerformanceTrack &&
     (finishedWork.mode & ProfileMode) !== NoMode &&
-    ((finishedWork.actualStartTime: any): number) > 0
+    ((finishedWork.actualStartTime: any): number) > 0 &&
+    (finishedWork.flags & PerformedWork) !== NoFlags
   ) {
     logComponentRender(
       finishedWork,
@@ -2929,7 +2933,8 @@ function commitPassiveMountOnFiber(
     enableComponentPerformanceTrack &&
     (finishedWork.mode & ProfileMode) !== NoMode &&
     componentEffectStartTime >= 0 &&
-    componentEffectEndTime >= 0
+    componentEffectEndTime >= 0 &&
+    componentEffectDuration > 0.05
   ) {
     logComponentEffect(
       finishedWork,
@@ -3448,7 +3453,8 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
     enableComponentPerformanceTrack &&
     (finishedWork.mode & ProfileMode) !== NoMode &&
     componentEffectStartTime >= 0 &&
-    componentEffectEndTime >= 0
+    componentEffectEndTime >= 0 &&
+    componentEffectDuration > 0.05
   ) {
     logComponentEffect(
       finishedWork,