diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js index 92b1455c1b329..485edb72f33b6 100644 --- a/packages/react-reconciler/src/ReactFiber.js +++ b/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 | 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') { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index a5a91b99dfce1..6966656c39a78 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/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); } } diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js index b6b957647e044..0bb9c35df61c2 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js +++ b/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 diff --git a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap index 782b17b5e997d..8667688a0b8d8 100644 --- a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap +++ b/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) + ⚛ Foo [mount] -⚛ (React Tree Reconciliation: Yielded) +⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render ⚛ 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) +⚛ (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]