Remove "Waiting for async callback" User Timing measurement (#16379)

* Remove "Waiting for async callback" User Timing measurement

* Fix User Timing in PROD mode

packages/react-reconciler/src/ReactFiber.js

@@ -31,6 +31,7 @@ import warningWithoutStack from 'shared/warningWithoutStack';
 import {
   enableProfilerTimer,
   enableFundamentalAPI,
+  enableUserTimingAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoEffect, Placement} from 'shared/ReactSideEffectTags';
 import {ConcurrentRoot, BatchedRoot} from 'shared/ReactRootTags';
@@ -245,11 +246,7 @@ export type Fiber = {|
   _debugHookTypes?: Array<HookType> | null,
 |};
 
-let debugCounter;
-
-if (__DEV__) {
-  debugCounter = 1;
-}
+let debugCounter = 1;
 
 function FiberNode(
   tag: WorkTag,
@@ -319,11 +316,16 @@ function FiberNode(
     this.treeBaseDuration = 0;
   }
 
-  if (__DEV__) {
+  // This is normally DEV-only except www when it adds listeners.
+  // TODO: remove the User Timing integration in favor of Root Events.
+  if (enableUserTimingAPI) {
     this._debugID = debugCounter++;
+    this._debugIsCurrentlyTiming = false;
+  }
+
+  if (__DEV__) {
     this._debugSource = null;
     this._debugOwner = null;
-    this._debugIsCurrentlyTiming = false;
     this._debugNeedsRemount = false;
     this._debugHookTypes = null;
     if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -152,8 +152,6 @@ import {
 import {
   recordEffect,
   recordScheduleUpdate,
-  startRequestCallbackTimer,
-  stopRequestCallbackTimer,
   startWorkTimer,
   stopWorkTimer,
   stopFailedWorkTimer,
@@ -546,16 +544,6 @@ function scheduleCallbackForRoot(
         ),
         options,
       );
-      if (
-        enableUserTimingAPI &&
-        expirationTime !== Sync &&
-        (executionContext & (RenderContext | CommitContext)) === NoContext
-      ) {
-        // Scheduled an async callback, and we're not already working. Add an
-        // entry to the flamegraph that shows we're waiting for a callback
-        // to fire.
-        startRequestCallbackTimer();
-      }
     }
   }
 
@@ -816,11 +804,6 @@ function renderRoot(
     'Should not already be working.',
   );
 
-  if (enableUserTimingAPI && expirationTime !== Sync) {
-    const didExpire = isSync;
-    stopRequestCallbackTimer(didExpire);
-  }
-
   if (root.firstPendingTime < expirationTime) {
     // If there's no work left at this expiration time, exit immediately. This
     // happens when multiple callbacks are scheduled for a single root, but an
@@ -964,9 +947,6 @@ function renderRoot(
     if (workInProgress !== null) {
       // There's still work left over. Return a continuation.
       stopInterruptedWorkLoopTimer();
-      if (expirationTime !== Sync) {
-        startRequestCallbackTimer();
-      }
       return renderRoot.bind(null, root, expirationTime);
     }
   }

packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js

@@ -89,6 +89,15 @@ describe('ReactDebugFiberPerf', () => {
       // We don't use the overload with three arguments.
       measure(label, markName) {
         if (markName !== activeMeasure.markName) {
+          // Fail the test.
+          console.error(
+            'Unexpected measure() call: "%s". Active mark is "%s".',
+            markName,
+            activeMeasure.markName,
+          );
+          // This exception will be caught and ignored
+          // because in the real implementation, we don't want
+          // to spam the console due to a React bug.
           throw new Error('Unexpected measure() call.');
         }
         // Step one level up

packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ AllLifecycles [mount]
     ⚛ AllLifecycles.componentWillMount
@@ -15,8 +13,6 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
   ⚛ (Calling Lifecycle Methods: 1 Total)
     ⚛ AllLifecycles.componentDidMount
 
-⚛ (Waiting for async callback...)
-
 // Update
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ AllLifecycles [update]
@@ -31,8 +27,6 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
   ⚛ (Calling Lifecycle Methods: 2 Total)
     ⚛ AllLifecycles.componentDidUpdate
 
-⚛ (Waiting for async callback...)
-
 // Unmount
 ⚛ (React Tree Reconciliation: Completed Root)
 
@@ -45,9 +39,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduce overhead 1`] = `
-"⚛ (Waiting for async callback...)
-
-// The commit phase should mention A and B just once
+"// The commit phase should mention A and B just once
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
     ⚛ A [update]
@@ -62,8 +54,6 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
     ⚛ A.componentDidUpdate
     ⚛ B.componentDidUpdate
 
-⚛ (Waiting for async callback...)
-
 // Because of deduplication, we don't know B was cascading,
 // but we should still see the warning for the commit phase.
 ⚛ (React Tree Reconciliation: Completed Root)
@@ -92,9 +82,7 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
 `;
 
 exports[`ReactDebugFiberPerf does not include StrictMode or Profiler components in measurements 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Profiler [mount]
     ⚛ Parent [mount]
@@ -108,9 +96,7 @@ exports[`ReactDebugFiberPerf does not include StrictMode or Profiler components
 `;
 
 exports[`ReactDebugFiberPerf does not include context provider or consumer in measurements 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Child [mount]
@@ -143,9 +129,7 @@ exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is
 `;
 
 exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascading 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Should not print a warning
+"// Should not print a warning
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ NotCascading [mount]
@@ -156,8 +140,6 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 // Should not print a warning
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
@@ -172,9 +154,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
 `;
 
 exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Child [mount]
@@ -184,8 +164,6 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 // Update
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
@@ -196,8 +174,6 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
   ⚛ (Committing Host Effects: 2 Total)
   ⚛ (Calling Lifecycle Methods: 2 Total)
 
-⚛ (Waiting for async callback...)
-
 // Unmount
 ⚛ (React Tree Reconciliation: Completed Root)
 
@@ -209,17 +185,13 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Start rendering through B
+"// Start rendering through B
 ⚛ (React Tree Reconciliation: Yielded)
   ⚛ Parent [mount]
     ⚛ A [mount]
       ⚛ Child [mount]
     ⚛ B [mount]
 
-⚛ (Waiting for async callback...)
-
 // Complete the rest
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
@@ -245,8 +217,6 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 // Flush the child
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Child [mount]
@@ -259,9 +229,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf properly displays the forwardRef component in measurements 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Mount
+"// Mount
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ ForwardRef [mount]
@@ -279,9 +247,7 @@ exports[`ReactDebugFiberPerf properly displays the forwardRef component in measu
 `;
 
 exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Stop on Baddie and restart from Boundary
+"// Stop on Baddie and restart from Boundary
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⛔ Boundary [mount] Warning: An error was thrown inside this error boundary
@@ -313,9 +279,7 @@ exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Will fatal
+"// Will fatal
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Baddie [mount]
@@ -329,8 +293,6 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 1 Total)
 
-⚛ (Waiting for async callback...)
-
 // Will reconcile from a clean state
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
@@ -344,9 +306,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Should include just A and B, no Parents
+"// Should include just A and B, no Parents
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ A [update]
   ⚛ B [update]
@@ -359,9 +319,7 @@ exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Suspense [mount]
 
@@ -373,9 +331,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Suspense [mount]
 
@@ -384,8 +340,6 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
     ⛔ Suspense [update] Warning: Rendering was suspended
@@ -395,9 +349,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Suspense [mount]
 
@@ -406,16 +358,12 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = `
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
 
-⚛ (Waiting for async callback...)
-
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
     ⛔ Suspense [update] Warning: Rendering was suspended
     ⚛ Suspense [update]
       ⚛ Spinner [mount]
 
-⚛ (Waiting for async callback...)
-
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [update]
     ⚛ Suspense [update]
@@ -429,9 +377,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports memo 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Foo [mount]
 
@@ -443,9 +389,7 @@ exports[`ReactDebugFiberPerf supports memo 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf supports portals 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Completed Root)
+"⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Child [mount]
 
@@ -457,18 +401,16 @@ exports[`ReactDebugFiberPerf supports portals 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] = `
-"⚛ (Waiting for async callback...)
-
-⚛ (React Tree Reconciliation: Yielded)
+"⚛ (React Tree Reconciliation: Yielded)
   ⚛ Foo [mount]
 
-⚛ (Waiting for async callback...)
-  ⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render
-    ⚛ Foo [mount]
-  ⚛ (Committing Changes)
-    ⚛ (Committing Snapshot Effects: 0 Total)
-    ⚛ (Committing Host Effects: 1 Total)
-    ⚛ (Calling Lifecycle Methods: 0 Total)
+⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render
+  ⚛ Foo [mount]
+
+⚛ (Committing Changes)
+  ⚛ (Committing Snapshot Effects: 0 Total)
+  ⚛ (Committing Host Effects: 1 Total)
+  ⚛ (Calling Lifecycle Methods: 0 Total)
 
 ⚛ (React Tree Reconciliation: Completed Root)
 
@@ -480,9 +422,7 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] =
 `;
 
 exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
-"⛔ (Waiting for async callback...) Warning: Update expired; will flush synchronously
-
-⚛ (Committing Changes)
+"⚛ (Committing Changes)
   ⚛ (Committing Snapshot Effects: 0 Total)
   ⚛ (Committing Host Effects: 1 Total)
   ⚛ (Calling Lifecycle Methods: 0 Total)
@@ -490,9 +430,7 @@ exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Should print a warning
+"// Should print a warning
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Parent [mount]
     ⚛ Cascading [mount]
@@ -514,9 +452,7 @@ exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
 `;
 
 exports[`ReactDebugFiberPerf warns on cascading renders from top-level render 1`] = `
-"⚛ (Waiting for async callback...)
-
-// Rendering the first root
+"// Rendering the first root
 ⚛ (React Tree Reconciliation: Completed Root)
   ⚛ Cascading [mount]