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.

Author: sebmarkbage

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,