[DO NOT MERGE] Root event marks

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -16,8 +16,10 @@ import {Update, Snapshot} from 'shared/ReactSideEffectTags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
+  enableRootEventMarks,
   warnAboutDeprecatedLifecycles,
 } from 'shared/ReactFeatureFlags';
+import {workScheduled} from 'shared/RootEventsProfiling';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings';
 import {isMounted} from 'react-reconciler/reflection';
 import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
@@ -201,6 +203,10 @@ const classComponentUpdater = {
 
     enqueueUpdate(fiber, update);
     scheduleWork(fiber, expirationTime);
+
+    if (enableRootEventMarks) {
+      workScheduled('state-update', fiber);
+    }
   },
   enqueueReplaceState(inst, payload, callback) {
     const fiber = getInstance(inst);
@@ -225,6 +231,10 @@ const classComponentUpdater = {
 
     enqueueUpdate(fiber, update);
     scheduleWork(fiber, expirationTime);
+
+    if (enableRootEventMarks) {
+      workScheduled('state-update', fiber);
+    }
   },
   enqueueForceUpdate(inst, callback) {
     const fiber = getInstance(inst);
@@ -248,6 +258,10 @@ const classComponentUpdater = {
 
     enqueueUpdate(fiber, update);
     scheduleWork(fiber, expirationTime);
+
+    if (enableRootEventMarks) {
+      workScheduled('state-update', fiber);
+    }
   },
 };
 

packages/react-reconciler/src/ReactFiberHooks.js

@@ -19,6 +19,8 @@ import type {SuspenseConfig} from './ReactFiberSuspenseConfig';
 import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {enableRootEventMarks} from 'shared/ReactFeatureFlags';
+import {workScheduled} from 'shared/RootEventsProfiling';
 
 import {NoWork, Sync} from './ReactFiberExpirationTime';
 import {readContext} from './ReactFiberNewContext';
@@ -1356,6 +1358,10 @@ function dispatchAction<S, A>(
       }
     }
     scheduleWork(fiber, expirationTime);
+
+    if (enableRootEventMarks) {
+      workScheduled('state-update', fiber);
+    }
   }
 }
 

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -38,6 +38,8 @@ import {
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {enableRootEventMarks} from 'shared/ReactFeatureFlags';
+import {workScheduled} from 'shared/RootEventsProfiling';
 
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -226,9 +228,14 @@ export function updateContainer(
   parentComponent: ?React$Component<any, any>,
   callback: ?Function,
 ): ExpirationTime {
+  if (enableRootEventMarks) {
+    workScheduled('render', null);
+  }
+
   if (__DEV__) {
     onScheduleRoot(container, element);
   }
+
   const current = container.current;
   const currentTime = requestCurrentTimeForUpdate();
   if (__DEV__) {

packages/react-reconciler/src/ReactFiberThrow.js

@@ -15,6 +15,8 @@ import type {Update} from './ReactUpdateQueue';
 import type {Thenable} from './ReactFiberWorkLoop';
 import type {SuspenseContext} from './ReactFiberSuspenseContext';
 
+import {enableRootEventMarks} from 'shared/ReactFeatureFlags';
+import {componentSuspended} from 'shared/RootEventsProfiling';
 import getComponentName from 'shared/getComponentName';
 import {
   ClassComponent,
@@ -195,6 +197,10 @@ function throwException(
     // This is a thenable.
     const thenable: Thenable = (value: any);
 
+    if (enableRootEventMarks) {
+      componentSuspended(sourceFiber);
+    }
+
     if ((sourceFiber.mode & BlockingMode) === NoMode) {
       // Reset the memoizedState to what it was before we attempted
       // to render it.

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -22,6 +22,7 @@ import {
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
+  enableRootEventMarks,
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   flushSuspenseFallbacksInTests,
@@ -30,6 +31,17 @@ import {
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
+import {
+  commitStarted,
+  commitStopped,
+  layoutEffectsStarted,
+  layoutEffectsStopped,
+  passiveEffectsStarted,
+  passiveEffectsStopped,
+  renderAbandoned,
+  renderStarted,
+  renderStopped,
+} from 'shared/RootEventsProfiling';
 
 import {
   scheduleCallback,
@@ -684,6 +696,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       const prevDispatcher = pushDispatcher(root);
       const prevInteractions = pushInteractions(root);
       startWorkLoopTimer(workInProgress);
+      if (enableRootEventMarks) {
+        renderStarted();
+      }
       do {
         try {
           workLoopConcurrent();
@@ -1012,6 +1027,10 @@ function performSyncWorkOnRoot(root) {
     const prevInteractions = pushInteractions(root);
     startWorkLoopTimer(workInProgress);
 
+    if (enableRootEventMarks) {
+      renderStarted();
+    }
+
     do {
       try {
         workLoopSync();
@@ -1715,6 +1734,10 @@ function commitRoot(root) {
 }
 
 function commitRootImpl(root, renderPriorityLevel) {
+  if (enableRootEventMarks) {
+    commitStarted();
+  }
+
   do {
     // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which
     // means `flushPassiveEffects` will sometimes result in additional
@@ -1724,6 +1747,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     // flush synchronous work at the end, to avoid factoring hazards like this.
     flushPassiveEffects();
   } while (rootWithPendingPassiveEffects !== null);
+
   flushRenderPhaseStrictModeWarningsInDEV();
 
   invariant(
@@ -1734,6 +1758,10 @@ function commitRootImpl(root, renderPriorityLevel) {
   const finishedWork = root.finishedWork;
   const expirationTime = root.finishedExpirationTime;
   if (finishedWork === null) {
+    if (enableRootEventMarks) {
+      commitStopped();
+    }
+
     return null;
   }
   root.finishedWork = null;
@@ -2018,6 +2046,10 @@ function commitRootImpl(root, renderPriorityLevel) {
   }
 
   if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
+    if (enableRootEventMarks) {
+      commitStopped();
+    }
+
     // 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
@@ -2027,6 +2059,11 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   // If layout work was scheduled, flush it now.
   flushSyncCallbackQueue();
+
+  if (enableRootEventMarks) {
+    commitStopped();
+  }
+
   return null;
 }
 
@@ -2138,6 +2175,9 @@ function commitLayoutEffects(
   root: FiberRoot,
   committedExpirationTime: ExpirationTime,
 ) {
+  if (enableProfilerTimer) {
+    layoutEffectsStarted();
+  }
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentDebugFiberInDEV(nextEffect);
@@ -2163,16 +2203,35 @@ function commitLayoutEffects(
     resetCurrentDebugFiberInDEV();
     nextEffect = nextEffect.nextEffect;
   }
+  if (enableProfilerTimer) {
+    layoutEffectsStopped();
+  }
 }
 
 export function flushPassiveEffects() {
-  if (pendingPassiveEffectsRenderPriority !== NoPriority) {
-    const priorityLevel =
-      pendingPassiveEffectsRenderPriority > NormalPriority
-        ? NormalPriority
-        : pendingPassiveEffectsRenderPriority;
-    pendingPassiveEffectsRenderPriority = NoPriority;
-    return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+  if (enableRootEventMarks) {
+    try {
+      passiveEffectsStarted();
+      if (pendingPassiveEffectsRenderPriority !== NoPriority) {
+        const priorityLevel =
+          pendingPassiveEffectsRenderPriority > NormalPriority
+            ? NormalPriority
+            : pendingPassiveEffectsRenderPriority;
+        pendingPassiveEffectsRenderPriority = NoPriority;
+        return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+      }
+    } finally {
+      passiveEffectsStopped();
+    }
+  } else {
+    if (pendingPassiveEffectsRenderPriority !== NoPriority) {
+      const priorityLevel =
+        pendingPassiveEffectsRenderPriority > NormalPriority
+          ? NormalPriority
+          : pendingPassiveEffectsRenderPriority;
+      pendingPassiveEffectsRenderPriority = NoPriority;
+      return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+    }
   }
 }
 
@@ -2545,13 +2604,19 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
 function stopFinishedWorkLoopTimer() {
   const didCompleteRoot = true;
   stopWorkLoopTimer(interruptedBy, didCompleteRoot);
+  if (enableRootEventMarks) {
+    renderStopped(didCompleteRoot);
+  }
   interruptedBy = null;
 }
 
 function stopInterruptedWorkLoopTimer() {
   // TODO: Track which fiber caused the interruption.
   const didCompleteRoot = false;
   stopWorkLoopTimer(interruptedBy, didCompleteRoot);
+  if (enableRootEventMarks) {
+    renderStopped(didCompleteRoot);
+  }
   interruptedBy = null;
 }
 
@@ -2565,6 +2630,11 @@ function checkForInterruption(
     updateExpirationTime > renderExpirationTime
   ) {
     interruptedBy = fiberThatReceivedUpdate;
+
+    // TODO (brian) Is this accurate? Should we compare WIP root to fiber's root?
+    if (enableRootEventMarks) {
+      renderAbandoned();
+    }
   }
 }
 

packages/scheduler/src/RootEventsProfiling.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {enableRootEventMarks} from 'shared/ReactFeatureFlags';
+
+const supportsUserTiming =
+  typeof performance !== 'undefined' &&
+  typeof performance.mark === 'function' &&
+  typeof performance.clearMarks === 'function' &&
+  typeof performance.measure === 'function' &&
+  typeof performance.clearMeasures === 'function';
+
+export type PriorityLabel = 'high' | 'normal' | 'low';
+export type WorkType = 'render' | 'state-update';
+
+export function schedulerStarted(priorityLabel: PriorityLabel): void {
+  if (enableRootEventMarks) {
+    if (supportsUserTiming) {
+      performance.mark(`--scheduler-start-${priorityLabel}`);
+    }
+  }
+}
+
+export function schedulerStopped(priorityLabel: PriorityLabel): void {
+  if (enableRootEventMarks) {
+    if (supportsUserTiming) {
+      performance.mark(`--scheduler-stop-${priorityLabel}`);
+    }
+  }
+}

packages/scheduler/src/Scheduler.js

@@ -121,7 +121,7 @@ function handleTimeout(currentTime) {
 
 function flushWork(hasTimeRemaining, initialTime) {
   if (enableProfiling) {
-    markSchedulerUnsuspended(initialTime);
+    markSchedulerUnsuspended(initialTime, currentPriorityLevel);
   }
 
   // We'll need a host callback the next time work is scheduled.
@@ -156,7 +156,7 @@ function flushWork(hasTimeRemaining, initialTime) {
     isPerformingWork = false;
     if (enableProfiling) {
       const currentTime = getCurrentTime();
-      markSchedulerSuspended(currentTime);
+      markSchedulerSuspended(currentTime, currentPriorityLevel);
     }
   }
 }

packages/scheduler/src/SchedulerFeatureFlags.js

@@ -9,3 +9,4 @@
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
 export const enableProfiling = __PROFILE__;
+export const enableRootEventMarks = __PROFILE__;