Add user timing marks for scheduling profiler tool

packages/react-reconciler/src/ReactFiberClassComponent.old.js

@@ -17,6 +17,7 @@ import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
+  enableSchedulingProfiling,
   warnAboutDeprecatedLifecycles,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -59,6 +60,10 @@ import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
+import {
+  markForceUpdateScheduled,
+  markStateUpdateScheduled,
+} from './SchedulingProfiling';
 
 const fakeInternalInstance = {};
 const isArray = Array.isArray;
@@ -214,6 +219,11 @@ const classComponentUpdater = {
         }
       }
     }
+
+    if (enableSchedulingProfiling) {
+      const name = getComponentName(fiber.type) || 'Unknown';
+      markStateUpdateScheduled(name, fiber, lane);
+    }
   },
   enqueueReplaceState(inst, payload, callback) {
     const fiber = getInstance(inst);
@@ -243,6 +253,11 @@ const classComponentUpdater = {
         }
       }
     }
+
+    if (enableSchedulingProfiling) {
+      const name = getComponentName(fiber.type) || 'Unknown';
+      markStateUpdateScheduled(name, fiber, lane);
+    }
   },
   enqueueForceUpdate(inst, callback) {
     const fiber = getInstance(inst);
@@ -271,6 +286,11 @@ const classComponentUpdater = {
         }
       }
     }
+
+    if (enableSchedulingProfiling) {
+      const name = getComponentName(fiber.type) || 'Unknown';
+      markForceUpdateScheduled(name, fiber, lane);
+    }
   },
 };
 

packages/react-reconciler/src/ReactFiberHooks.old.js

@@ -26,6 +26,7 @@ import type {OpaqueIDType} from './ReactFiberHostConfig';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   enableDebugTracing,
+  enableSchedulingProfiling,
   enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 
@@ -87,6 +88,7 @@ import {
 } from './ReactMutableSource.old';
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
+import {markStateUpdateScheduled} from './SchedulingProfiling';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1750,6 +1752,11 @@ function dispatchAction<S, A>(
       }
     }
   }
+
+  if (enableSchedulingProfiling) {
+    const name = getComponentName(fiber.type) || 'Unknown';
+    markStateUpdateScheduled(name, fiber, lane);
+  }
 }
 
 export const ContextOnlyDispatcher: Dispatcher = {

packages/react-reconciler/src/ReactFiberReconciler.old.js

@@ -35,6 +35,7 @@ import {
 } from './ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
+import {enableSchedulingProfiling} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -87,6 +88,7 @@ import {
   setRefreshHandler,
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.old';
+import {markRenderScheduled} from './SchedulingProfiling';
 
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
@@ -265,6 +267,15 @@ export function updateContainer(
   const suspenseConfig = requestCurrentSuspenseConfig();
   const lane = requestUpdateLane(current, suspenseConfig);
 
+  if (enableSchedulingProfiling) {
+    let componentName = 'Unknown';
+    if (ReactCurrentFiberCurrent !== null) {
+      componentName =
+        getComponentName(ReactCurrentFiberCurrent.type) || componentName;
+    }
+    markRenderScheduled(componentName, current, lane);
+  }
+
   const context = getContextForSubtree(parentComponent);
   if (container.context === null) {
     container.context = context;

packages/react-reconciler/src/ReactFiberThrow.old.js

@@ -32,7 +32,10 @@ import {
 } from './ReactSideEffectTags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
 import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
-import {enableDebugTracing} from 'shared/ReactFeatureFlags';
+import {
+  enableDebugTracing,
+  enableSchedulingProfiling,
+} from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
   enqueueCapturedUpdate,
@@ -56,6 +59,7 @@ import {
 } from './ReactFiberWorkLoop.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
+import {markComponentSuspended} from './SchedulingProfiling';
 
 import {
   SyncLane,
@@ -201,6 +205,11 @@ function throwException(
       }
     }
 
+    if (enableSchedulingProfiling) {
+      const name = getComponentName(sourceFiber.type) || 'Unknown';
+      markComponentSuspended(name, sourceFiber, wakeable);
+    }
+
     if ((sourceFiber.mode & BlockingMode) === NoMode) {
       // Reset the memoizedState to what it was before we attempted
       // to render it.

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -27,6 +27,7 @@ import {
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
+  enableSchedulingProfiling,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -56,6 +57,17 @@ import {
   logRenderStarted,
   logRenderStopped,
 } from './DebugTracing';
+import {
+  markCommitStarted,
+  markCommitStopped,
+  markLayoutEffectsStarted,
+  markLayoutEffectsStopped,
+  markPassiveEffectsStarted,
+  markPassiveEffectsStopped,
+  markRenderStarted,
+  markRenderYielded,
+  markRenderStopped,
+} from './SchedulingProfiling';
 
 // The scheduler is imported here *only* to detect whether it's been mocked
 import * as Scheduler from 'scheduler';
@@ -1461,6 +1473,10 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopSync();
@@ -1492,6 +1508,10 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markRenderStopped();
+  }
+
   // Set this to null to indicate there's no in-progress render.
   workInProgressRoot = null;
   workInProgressRootRenderLanes = NoLanes;
@@ -1528,6 +1548,10 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopConcurrent();
@@ -1553,9 +1577,16 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
   // Check if the tree has completed.
   if (workInProgress !== null) {
     // Still work remaining.
+    if (enableSchedulingProfiling) {
+      markRenderYielded();
+    }
     return RootIncomplete;
   } else {
     // Completed the tree.
+    if (enableSchedulingProfiling) {
+      markRenderStopped();
+    }
+
     // Set this to null to indicate there's no in-progress render.
     workInProgressRoot = null;
     workInProgressRootRenderLanes = NoLanes;
@@ -1845,13 +1876,21 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markCommitStarted(lanes);
+  }
+
   if (finishedWork === null) {
     if (__DEV__) {
       if (enableDebugTracing) {
         logCommitStopped();
       }
     }
 
+    if (enableSchedulingProfiling) {
+      markCommitStopped();
+    }
+
     return null;
   }
   root.finishedWork = null;
@@ -2142,6 +2181,10 @@ function commitRootImpl(root, renderPriorityLevel) {
       }
     }
 
+    if (enableSchedulingProfiling) {
+      markCommitStopped();
+    }
+
     // This is a legacy edge case. We just committed the initial mount of
     // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
     // synchronously, but layout updates should be deferred until the end
@@ -2158,6 +2201,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markCommitStopped();
+  }
+
   return null;
 }
 
@@ -2288,6 +2335,10 @@ function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markLayoutEffectsStarted(committedLanes);
+  }
+
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentDebugFiberInDEV(nextEffect);
@@ -2312,6 +2363,10 @@ function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
       logLayoutEffectsStopped();
     }
   }
+
+  if (enableSchedulingProfiling) {
+    markLayoutEffectsStopped();
+  }
 }
 
 export function flushPassiveEffects() {
@@ -2399,6 +2454,10 @@ function flushPassiveEffectsImpl() {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markPassiveEffectsStarted(lanes);
+  }
+
   if (__DEV__) {
     isFlushingPassiveEffects = true;
   }
@@ -2561,6 +2620,10 @@ function flushPassiveEffectsImpl() {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markPassiveEffectsStopped();
+  }
+
   executionContext = prevExecutionContext;
 
   flushSyncCallbackQueue();