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,16 @@ export function updateContainer(
   const suspenseConfig = requestCurrentSuspenseConfig();
   const lane = requestUpdateLane(current, suspenseConfig);
 
+  // TODO: Confirm that this location and container/lane make sense
+  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

@@ -31,7 +31,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,
@@ -55,6 +58,7 @@ import {
 } from './ReactFiberWorkLoop.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
+import {markComponentSuspended} from './SchedulingProfiling';
 
 import {
   SyncLane,
@@ -200,6 +204,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,18 @@ import {
   logRenderStarted,
   logRenderStopped,
 } from './DebugTracing';
+import {
+  markCommitStarted,
+  markCommitStopped,
+  markLayoutEffectsStarted,
+  markLayoutEffectsStopped,
+  markPassiveEffectsStarted,
+  markPassiveEffectsStopped,
+  markRenderStarted,
+  markRenderYielded,
+  markRenderStopped,
+  markRenderAbandoned,
+} from './SchedulingProfiling';
 
 // The scheduler is imported here *only* to detect whether it's been mocked
 import * as Scheduler from 'scheduler';
@@ -462,6 +475,18 @@ export function scheduleUpdateOnFiber(
     return null;
   }
 
+  if (enableSchedulingProfiling) {
+    if (
+      workInProgressRoot !== null &&
+      // TODO: Confirm that this makes sense
+      !includesSomeLane(workInProgressRootRenderLanes, lane)
+      // Original criterion: expirationTime > renderExpirationTime
+      // Location: https://github.com/bvaughn/react/blob/root-event-marks/packages/react-reconciler/src/ReactFiberWorkLoop.js#L2846
+    ) {
+      markRenderAbandoned();
+    }
+  }
+
   // TODO: requestUpdateLanePriority also reads the priority. Pass the
   // priority as an argument to that function and this one.
   const priorityLevel = getCurrentPriorityLevel();
@@ -1461,6 +1486,10 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopSync();
@@ -1492,6 +1521,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 +1561,10 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     }
   }
 
+  if (enableSchedulingProfiling) {
+    markRenderStarted(lanes);
+  }
+
   do {
     try {
       workLoopConcurrent();
@@ -1553,9 +1590,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;