{"commit":{"revision":"3b27160f82d9934f7ea9ddf064424634526702ca","shortRevision":"3b27160f82","subject":"Put perf integration behind a feature flag (#11455)","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","authoredAt":"2017-11-06T16:07:08+00:00"},"body":"* Enable User Timing API integration with a feature flag\r\n\r\n* Expose a way to toggle user timing flag in www\r\n\r\n* Update ReactNativeCSFeatureFlags.js\r\n\r\n* Update ReactFeatureFlags.js","files":[{"path":"packages\/react-cs-renderer\/src\/ReactNativeCSFeatureFlags.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMFB.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactDebugFiberPerf.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberClassComponent.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberContext.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberScheduler.js","status":"M"},{"path":"packages\/shared\/ReactFeatureFlags.js","status":"M"},{"path":"scripts\/rollup\/shims\/rollup\/ReactFeatureFlags-www.js","status":"M"}],"parents":["699496164dd9422ebefec5e2488dd7e4f25cb716"],"patch":"diff --git a\/packages\/react-cs-renderer\/src\/ReactNativeCSFeatureFlags.js b\/packages\/react-cs-renderer\/src\/ReactNativeCSFeatureFlags.js\nindex 7922bd373d..a7e3f5fc56 100644\n--- a\/packages\/react-cs-renderer\/src\/ReactNativeCSFeatureFlags.js\n+++ b\/packages\/react-cs-renderer\/src\/ReactNativeCSFeatureFlags.js\n@@ -7,6 +7,8 @@\n * @flow\n *\/\n \n+import invariant from 'fbjs\/lib\/invariant';\n+\n import typeof * as FeatureFlagsType from 'shared\/ReactFeatureFlags';\n import typeof * as CSFeatureFlagsType from '.\/ReactNativeCSFeatureFlags';\n \n@@ -14,12 +16,18 @@ export const enableAsyncSubtreeAPI = true;\n export const enableAsyncSchedulingByDefaultInReactDOM = false;\n export const enableReactFragment = false;\n export const enableCreateRoot = false;\n+export const enableUserTimingAPI = __DEV__;\n \n \/\/ React Native CS uses persistent reconciler.\n export const enableMutatingReconciler = false;\n export const enableNoopReconciler = false;\n export const enablePersistentReconciler = true;\n \n+\/\/ Only used in www builds.\n+export function addUserTimingListener() {\n+ invariant(false, 'Not implemented.');\n+}\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n \/\/ eslint-disable-next-line no-unused-vars\n type Check<_X, Y: _X, X: Y=_X> = null;\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMFB.js b\/packages\/react-dom\/src\/client\/ReactDOMFB.js\nindex 36688af625..2be4ee489d 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMFB.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMFB.js\n@@ -13,6 +13,7 @@ import * as ReactInstanceMap from 'shared\/ReactInstanceMap';\n import * as ReactFiberErrorLogger\n from 'react-reconciler\/src\/ReactFiberErrorLogger';\n import ReactErrorUtils from 'shared\/ReactErrorUtils';\n+import {addUserTimingListener} from 'shared\/ReactFeatureFlags';\n \n import ReactDOM from '.\/ReactDOM';\n import * as ReactBrowserEventEmitter from '..\/events\/ReactBrowserEventEmitter';\n@@ -31,6 +32,8 @@ Object.assign(\n ReactInstanceMap,\n \/\/ Used by www msite:\n TapEventPlugin,\n+ \/\/ Perf experiment\n+ addUserTimingListener,\n },\n );\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactDebugFiberPerf.js b\/packages\/react-reconciler\/src\/ReactDebugFiberPerf.js\nindex 8cbfcb724b..ad04bc9cec 100644\n--- a\/packages\/react-reconciler\/src\/ReactDebugFiberPerf.js\n+++ b\/packages\/react-reconciler\/src\/ReactDebugFiberPerf.js\n@@ -9,6 +9,7 @@\n \n import type {Fiber} from '.\/ReactFiber';\n \n+import {enableUserTimingAPI} from 'shared\/ReactFeatureFlags';\n import getComponentName from 'shared\/getComponentName';\n import {\n HostRoot,\n@@ -19,9 +20,6 @@ import {\n Fragment,\n } from 'shared\/ReactTypeOfWork';\n \n-\/\/ Trust the developer to only use this with a __DEV__ check\n-let ReactDebugFiberPerf = (({}: any): typeof ReactDebugFiberPerf);\n-\n type MeasurementPhase =\n | 'componentWillMount'\n | 'componentWillUnmount'\n@@ -32,382 +30,406 @@ type MeasurementPhase =\n | 'componentDidMount'\n | 'getChildContext';\n \n-if (__DEV__) {\n- \/\/ Prefix measurements so that it's possible to filter them.\n- \/\/ Longer prefixes are hard to read in DevTools.\n- const reactEmoji = '\\u269B';\n- const warningEmoji = '\\u26D4';\n- const supportsUserTiming =\n- typeof performance !== 'undefined' &&\n- typeof performance.mark === 'function' &&\n- typeof performance.clearMarks === 'function' &&\n- typeof performance.measure === 'function' &&\n- typeof performance.clearMeasures === 'function';\n-\n- \/\/ Keep track of current fiber so that we know the path to unwind on pause.\n- \/\/ TODO: this looks the same as nextUnitOfWork in scheduler. Can we unify them?\n- let currentFiber: Fiber | null = null;\n- \/\/ If we're in the middle of user code, which fiber and method is it?\n- \/\/ Reusing `currentFiber` would be confusing for this because user code fiber\n- \/\/ can change during commit phase too, but we don't need to unwind it (since\n- \/\/ lifecycles in the commit phase don't resemble a tree).\n- let currentPhase: MeasurementPhase | null = null;\n- let currentPhaseFiber: Fiber | null = null;\n- \/\/ Did lifecycle hook schedule an update? This is often a performance problem,\n- \/\/ so we will keep track of it, and include it in the report.\n- \/\/ Track commits caused by cascading updates.\n- let isCommitting: boolean = false;\n- let hasScheduledUpdateInCurrentCommit: boolean = false;\n- let hasScheduledUpdateInCurrentPhase: boolean = false;\n- let commitCountInCurrentWorkLoop: number = 0;\n- let effectCountInCurrentCommit: number = 0;\n- \/\/ During commits, we only show a measurement once per method name\n- \/\/ to avoid stretch the commit phase with measurement overhead.\n- const labelsInCurrentCommit: Set = new Set();\n-\n- const formatMarkName = (markName: string) => {\n- return `${reactEmoji} ${markName}`;\n- };\n-\n- const formatLabel = (label: string, warning: string | null) => {\n- const prefix = warning ? `${warningEmoji} ` : `${reactEmoji} `;\n- const suffix = warning ? ` Warning: ${warning}` : '';\n- return `${prefix}${label}${suffix}`;\n- };\n-\n- const beginMark = (markName: string) => {\n- performance.mark(formatMarkName(markName));\n- };\n-\n- const clearMark = (markName: string) => {\n- performance.clearMarks(formatMarkName(markName));\n- };\n-\n- const endMark = (label: string, markName: string, warning: string | null) => {\n- const formattedMarkName = formatMarkName(markName);\n- const formattedLabel = formatLabel(label, warning);\n- try {\n- performance.measure(formattedLabel, formattedMarkName);\n- } catch (err) {\n- \/\/ If previous mark was missing for some reason, this will throw.\n- \/\/ This could only happen if React crashed in an unexpected place earlier.\n- \/\/ Don't pile on with more errors.\n+\/\/ Prefix measurements so that it's possible to filter them.\n+\/\/ Longer prefixes are hard to read in DevTools.\n+const reactEmoji = '\\u269B';\n+const warningEmoji = '\\u26D4';\n+const supportsUserTiming =\n+ typeof performance !== 'undefined' &&\n+ typeof performance.mark === 'function' &&\n+ typeof performance.clearMarks === 'function' &&\n+ typeof performance.measure === 'function' &&\n+ typeof performance.clearMeasures === 'function';\n+\n+\/\/ Keep track of current fiber so that we know the path to unwind on pause.\n+\/\/ TODO: this looks the same as nextUnitOfWork in scheduler. Can we unify them?\n+let currentFiber: Fiber | null = null;\n+\/\/ If we're in the middle of user code, which fiber and method is it?\n+\/\/ Reusing `currentFiber` would be confusing for this because user code fiber\n+\/\/ can change during commit phase too, but we don't need to unwind it (since\n+\/\/ lifecycles in the commit phase don't resemble a tree).\n+let currentPhase: MeasurementPhase | null = null;\n+let currentPhaseFiber: Fiber | null = null;\n+\/\/ Did lifecycle hook schedule an update? This is often a performance problem,\n+\/\/ so we will keep track of it, and include it in the report.\n+\/\/ Track commits caused by cascading updates.\n+let isCommitting: boolean = false;\n+let hasScheduledUpdateInCurrentCommit: boolean = false;\n+let hasScheduledUpdateInCurrentPhase: boolean = false;\n+let commitCountInCurrentWorkLoop: number = 0;\n+let effectCountInCurrentCommit: number = 0;\n+\/\/ During commits, we only show a measurement once per method name\n+\/\/ to avoid stretch the commit phase with measurement overhead.\n+const labelsInCurrentCommit: Set = new Set();\n+\n+const formatMarkName = (markName: string) => {\n+ return `${reactEmoji} ${markName}`;\n+};\n+\n+const formatLabel = (label: string, warning: string | null) => {\n+ const prefix = warning ? `${warningEmoji} ` : `${reactEmoji} `;\n+ const suffix = warning ? ` Warning: ${warning}` : '';\n+ return `${prefix}${label}${suffix}`;\n+};\n+\n+const beginMark = (markName: string) => {\n+ performance.mark(formatMarkName(markName));\n+};\n+\n+const clearMark = (markName: string) => {\n+ performance.clearMarks(formatMarkName(markName));\n+};\n+\n+const endMark = (label: string, markName: string, warning: string | null) => {\n+ const formattedMarkName = formatMarkName(markName);\n+ const formattedLabel = formatLabel(label, warning);\n+ try {\n+ performance.measure(formattedLabel, formattedMarkName);\n+ } catch (err) {\n+ \/\/ If previous mark was missing for some reason, this will throw.\n+ \/\/ This could only happen if React crashed in an unexpected place earlier.\n+ \/\/ Don't pile on with more errors.\n+ }\n+ \/\/ Clear marks immediately to avoid growing buffer.\n+ performance.clearMarks(formattedMarkName);\n+ performance.clearMeasures(formattedLabel);\n+};\n+\n+const getFiberMarkName = (label: string, debugID: number) => {\n+ return `${label} (#${debugID})`;\n+};\n+\n+const getFiberLabel = (\n+ componentName: string,\n+ isMounted: boolean,\n+ phase: MeasurementPhase | null,\n+) => {\n+ if (phase === null) {\n+ \/\/ These are composite component total time measurements.\n+ return `${componentName} [${isMounted ? 'update' : 'mount'}]`;\n+ } else {\n+ \/\/ Composite component methods.\n+ return `${componentName}.${phase}`;\n+ }\n+};\n+\n+const beginFiberMark = (\n+ fiber: Fiber,\n+ phase: MeasurementPhase | null,\n+): boolean => {\n+ const componentName = getComponentName(fiber) || 'Unknown';\n+ const debugID = ((fiber._debugID: any): number);\n+ const isMounted = fiber.alternate !== null;\n+ const label = getFiberLabel(componentName, isMounted, phase);\n+\n+ if (isCommitting && labelsInCurrentCommit.has(label)) {\n+ \/\/ During the commit phase, we don't show duplicate labels because\n+ \/\/ there is a fixed overhead for every measurement, and we don't\n+ \/\/ want to stretch the commit phase beyond necessary.\n+ return false;\n+ }\n+ labelsInCurrentCommit.add(label);\n+\n+ const markName = getFiberMarkName(label, debugID);\n+ beginMark(markName);\n+ return true;\n+};\n+\n+const clearFiberMark = (fiber: Fiber, phase: MeasurementPhase | null) => {\n+ const componentName = getComponentName(fiber) || 'Unknown';\n+ const debugID = ((fiber._debugID: any): number);\n+ const isMounted = fiber.alternate !== null;\n+ const label = getFiberLabel(componentName, isMounted, phase);\n+ const markName = getFiberMarkName(label, debugID);\n+ clearMark(markName);\n+};\n+\n+const endFiberMark = (\n+ fiber: Fiber,\n+ phase: MeasurementPhase | null,\n+ warning: string | null,\n+) => {\n+ const componentName = getComponentName(fiber) || 'Unknown';\n+ const debugID = ((fiber._debugID: any): number);\n+ const isMounted = fiber.alternate !== null;\n+ const label = getFiberLabel(componentName, isMounted, phase);\n+ const markName = getFiberMarkName(label, debugID);\n+ endMark(label, markName, warning);\n+};\n+\n+const shouldIgnoreFiber = (fiber: Fiber): boolean => {\n+ \/\/ Host components should be skipped in the timeline.\n+ \/\/ We could check typeof fiber.type, but does this work with RN?\n+ switch (fiber.tag) {\n+ case HostRoot:\n+ case HostComponent:\n+ case HostText:\n+ case HostPortal:\n+ case ReturnComponent:\n+ case Fragment:\n+ return true;\n+ default:\n+ return false;\n+ }\n+};\n+\n+const clearPendingPhaseMeasurement = () => {\n+ if (currentPhase !== null && currentPhaseFiber !== null) {\n+ clearFiberMark(currentPhaseFiber, currentPhase);\n+ }\n+ currentPhaseFiber = null;\n+ currentPhase = null;\n+ hasScheduledUpdateInCurrentPhase = false;\n+};\n+\n+const pauseTimers = () => {\n+ \/\/ Stops all currently active measurements so that they can be resumed\n+ \/\/ if we continue in a later deferred loop from the same unit of work.\n+ let fiber = currentFiber;\n+ while (fiber) {\n+ if (fiber._debugIsCurrentlyTiming) {\n+ endFiberMark(fiber, null, null);\n }\n- \/\/ Clear marks immediately to avoid growing buffer.\n- performance.clearMarks(formattedMarkName);\n- performance.clearMeasures(formattedLabel);\n- };\n-\n- const getFiberMarkName = (label: string, debugID: number) => {\n- return `${label} (#${debugID})`;\n- };\n-\n- const getFiberLabel = (\n- componentName: string,\n- isMounted: boolean,\n- phase: MeasurementPhase | null,\n- ) => {\n- if (phase === null) {\n- \/\/ These are composite component total time measurements.\n- return `${componentName} [${isMounted ? 'update' : 'mount'}]`;\n- } else {\n- \/\/ Composite component methods.\n- return `${componentName}.${phase}`;\n+ fiber = fiber.return;\n+ }\n+};\n+\n+const resumeTimersRecursively = (fiber: Fiber) => {\n+ if (fiber.return !== null) {\n+ resumeTimersRecursively(fiber.return);\n+ }\n+ if (fiber._debugIsCurrentlyTiming) {\n+ beginFiberMark(fiber, null);\n+ }\n+};\n+\n+const resumeTimers = () => {\n+ \/\/ Resumes all measurements that were active during the last deferred loop.\n+ if (currentFiber !== null) {\n+ resumeTimersRecursively(currentFiber);\n+ }\n+};\n+\n+export function recordEffect(): void {\n+ if (enableUserTimingAPI) {\n+ effectCountInCurrentCommit++;\n+ }\n+}\n+\n+export function recordScheduleUpdate(): void {\n+ if (enableUserTimingAPI) {\n+ if (isCommitting) {\n+ hasScheduledUpdateInCurrentCommit = true;\n }\n- };\n-\n- const beginFiberMark = (\n- fiber: Fiber,\n- phase: MeasurementPhase | null,\n- ): boolean => {\n- const componentName = getComponentName(fiber) || 'Unknown';\n- const debugID = ((fiber._debugID: any): number);\n- const isMounted = fiber.alternate !== null;\n- const label = getFiberLabel(componentName, isMounted, phase);\n-\n- if (isCommitting && labelsInCurrentCommit.has(label)) {\n- \/\/ During the commit phase, we don't show duplicate labels because\n- \/\/ there is a fixed overhead for every measurement, and we don't\n- \/\/ want to stretch the commit phase beyond necessary.\n- return false;\n+ if (\n+ currentPhase !== null &&\n+ currentPhase !== 'componentWillMount' &&\n+ currentPhase !== 'componentWillReceiveProps'\n+ ) {\n+ hasScheduledUpdateInCurrentPhase = true;\n }\n- labelsInCurrentCommit.add(label);\n-\n- const markName = getFiberMarkName(label, debugID);\n- beginMark(markName);\n- return true;\n- };\n-\n- const clearFiberMark = (fiber: Fiber, phase: MeasurementPhase | null) => {\n- const componentName = getComponentName(fiber) || 'Unknown';\n- const debugID = ((fiber._debugID: any): number);\n- const isMounted = fiber.alternate !== null;\n- const label = getFiberLabel(componentName, isMounted, phase);\n- const markName = getFiberMarkName(label, debugID);\n- clearMark(markName);\n- };\n-\n- const endFiberMark = (\n- fiber: Fiber,\n- phase: MeasurementPhase | null,\n- warning: string | null,\n- ) => {\n- const componentName = getComponentName(fiber) || 'Unknown';\n- const debugID = ((fiber._debugID: any): number);\n- const isMounted = fiber.alternate !== null;\n- const label = getFiberLabel(componentName, isMounted, phase);\n- const markName = getFiberMarkName(label, debugID);\n- endMark(label, markName, warning);\n- };\n-\n- const shouldIgnoreFiber = (fiber: Fiber): boolean => {\n- \/\/ Host components should be skipped in the timeline.\n- \/\/ We could check typeof fiber.type, but does this work with RN?\n- switch (fiber.tag) {\n- case HostRoot:\n- case HostComponent:\n- case HostText:\n- case HostPortal:\n- case ReturnComponent:\n- case Fragment:\n- return true;\n- default:\n- return false;\n+ }\n+}\n+\n+export function startWorkTimer(fiber: Fiber): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n+ return;\n }\n- };\n+ \/\/ If we pause, this is the fiber to unwind from.\n+ currentFiber = fiber;\n+ if (!beginFiberMark(fiber, null)) {\n+ return;\n+ }\n+ fiber._debugIsCurrentlyTiming = true;\n+ }\n+}\n+\n+export function cancelWorkTimer(fiber: Fiber): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n+ return;\n+ }\n+ \/\/ Remember we shouldn't complete measurement for this fiber.\n+ \/\/ Otherwise flamechart will be deep even for small updates.\n+ fiber._debugIsCurrentlyTiming = false;\n+ clearFiberMark(fiber, null);\n+ }\n+}\n \n- const clearPendingPhaseMeasurement = () => {\n+export function stopWorkTimer(fiber: Fiber): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n+ return;\n+ }\n+ \/\/ If we pause, its parent is the fiber to unwind from.\n+ currentFiber = fiber.return;\n+ if (!fiber._debugIsCurrentlyTiming) {\n+ return;\n+ }\n+ fiber._debugIsCurrentlyTiming = false;\n+ endFiberMark(fiber, null, null);\n+ }\n+}\n+\n+export function stopFailedWorkTimer(fiber: Fiber): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n+ return;\n+ }\n+ \/\/ If we pause, its parent is the fiber to unwind from.\n+ currentFiber = fiber.return;\n+ if (!fiber._debugIsCurrentlyTiming) {\n+ return;\n+ }\n+ fiber._debugIsCurrentlyTiming = false;\n+ const warning = 'An error was thrown inside this error boundary';\n+ endFiberMark(fiber, null, warning);\n+ }\n+}\n+\n+export function startPhaseTimer(fiber: Fiber, phase: MeasurementPhase): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n+ }\n+ clearPendingPhaseMeasurement();\n+ if (!beginFiberMark(fiber, phase)) {\n+ return;\n+ }\n+ currentPhaseFiber = fiber;\n+ currentPhase = phase;\n+ }\n+}\n+\n+export function stopPhaseTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n+ }\n if (currentPhase !== null && currentPhaseFiber !== null) {\n- clearFiberMark(currentPhaseFiber, currentPhase);\n+ const warning = hasScheduledUpdateInCurrentPhase\n+ ? 'Scheduled a cascading update'\n+ : null;\n+ endFiberMark(currentPhaseFiber, currentPhase, warning);\n }\n- currentPhaseFiber = null;\n currentPhase = null;\n- hasScheduledUpdateInCurrentPhase = false;\n- };\n-\n- const pauseTimers = () => {\n- \/\/ Stops all currently active measurements so that they can be resumed\n- \/\/ if we continue in a later deferred loop from the same unit of work.\n- let fiber = currentFiber;\n- while (fiber) {\n- if (fiber._debugIsCurrentlyTiming) {\n- endFiberMark(fiber, null, null);\n- }\n- fiber = fiber.return;\n+ currentPhaseFiber = null;\n+ }\n+}\n+\n+export function startWorkLoopTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n }\n- };\n+ commitCountInCurrentWorkLoop = 0;\n+ \/\/ This is top level call.\n+ \/\/ Any other measurements are performed within.\n+ beginMark('(React Tree Reconciliation)');\n+ \/\/ Resume any measurements that were in progress during the last loop.\n+ resumeTimers();\n+ }\n+}\n \n- const resumeTimersRecursively = (fiber: Fiber) => {\n- if (fiber.return !== null) {\n- resumeTimersRecursively(fiber.return);\n+export function stopWorkLoopTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n }\n- if (fiber._debugIsCurrentlyTiming) {\n- beginFiberMark(fiber, null);\n+ const warning = commitCountInCurrentWorkLoop > 1\n+ ? 'There were cascading updates'\n+ : null;\n+ commitCountInCurrentWorkLoop = 0;\n+ \/\/ Pause any measurements until the next loop.\n+ pauseTimers();\n+ endMark(\n+ '(React Tree Reconciliation)',\n+ '(React Tree Reconciliation)',\n+ warning,\n+ );\n+ }\n+}\n+\n+export function startCommitTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n }\n- };\n+ isCommitting = true;\n+ hasScheduledUpdateInCurrentCommit = false;\n+ labelsInCurrentCommit.clear();\n+ beginMark('(Committing Changes)');\n+ }\n+}\n \n- const resumeTimers = () => {\n- \/\/ Resumes all measurements that were active during the last deferred loop.\n- if (currentFiber !== null) {\n- resumeTimersRecursively(currentFiber);\n+export function stopCommitTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n }\n- };\n-\n- ReactDebugFiberPerf = {\n- recordEffect(): void {\n- effectCountInCurrentCommit++;\n- },\n-\n- recordScheduleUpdate(): void {\n- if (isCommitting) {\n- hasScheduledUpdateInCurrentCommit = true;\n- }\n- if (\n- currentPhase !== null &&\n- currentPhase !== 'componentWillMount' &&\n- currentPhase !== 'componentWillReceiveProps'\n- ) {\n- hasScheduledUpdateInCurrentPhase = true;\n- }\n- },\n-\n- startWorkTimer(fiber: Fiber): void {\n- if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n- return;\n- }\n- \/\/ If we pause, this is the fiber to unwind from.\n- currentFiber = fiber;\n- if (!beginFiberMark(fiber, null)) {\n- return;\n- }\n- fiber._debugIsCurrentlyTiming = true;\n- },\n-\n- cancelWorkTimer(fiber: Fiber): void {\n- if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n- return;\n- }\n- \/\/ Remember we shouldn't complete measurement for this fiber.\n- \/\/ Otherwise flamechart will be deep even for small updates.\n- fiber._debugIsCurrentlyTiming = false;\n- clearFiberMark(fiber, null);\n- },\n-\n- stopWorkTimer(fiber: Fiber): void {\n- if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n- return;\n- }\n- \/\/ If we pause, its parent is the fiber to unwind from.\n- currentFiber = fiber.return;\n- if (!fiber._debugIsCurrentlyTiming) {\n- return;\n- }\n- fiber._debugIsCurrentlyTiming = false;\n- endFiberMark(fiber, null, null);\n- },\n-\n- stopFailedWorkTimer(fiber: Fiber): void {\n- if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {\n- return;\n- }\n- \/\/ If we pause, its parent is the fiber to unwind from.\n- currentFiber = fiber.return;\n- if (!fiber._debugIsCurrentlyTiming) {\n- return;\n- }\n- fiber._debugIsCurrentlyTiming = false;\n- const warning = 'An error was thrown inside this error boundary';\n- endFiberMark(fiber, null, warning);\n- },\n-\n- startPhaseTimer(fiber: Fiber, phase: MeasurementPhase): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- clearPendingPhaseMeasurement();\n- if (!beginFiberMark(fiber, phase)) {\n- return;\n- }\n- currentPhaseFiber = fiber;\n- currentPhase = phase;\n- },\n-\n- stopPhaseTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- if (currentPhase !== null && currentPhaseFiber !== null) {\n- const warning = hasScheduledUpdateInCurrentPhase\n- ? 'Scheduled a cascading update'\n- : null;\n- endFiberMark(currentPhaseFiber, currentPhase, warning);\n- }\n- currentPhase = null;\n- currentPhaseFiber = null;\n- },\n-\n- startWorkLoopTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- commitCountInCurrentWorkLoop = 0;\n- \/\/ This is top level call.\n- \/\/ Any other measurements are performed within.\n- beginMark('(React Tree Reconciliation)');\n- \/\/ Resume any measurements that were in progress during the last loop.\n- resumeTimers();\n- },\n-\n- stopWorkLoopTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- const warning = commitCountInCurrentWorkLoop > 1\n- ? 'There were cascading updates'\n- : null;\n- commitCountInCurrentWorkLoop = 0;\n- \/\/ Pause any measurements until the next loop.\n- pauseTimers();\n- endMark(\n- '(React Tree Reconciliation)',\n- '(React Tree Reconciliation)',\n- warning,\n- );\n- },\n-\n- startCommitTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- isCommitting = true;\n- hasScheduledUpdateInCurrentCommit = false;\n- labelsInCurrentCommit.clear();\n- beginMark('(Committing Changes)');\n- },\n-\n- stopCommitTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n-\n- let warning = null;\n- if (hasScheduledUpdateInCurrentCommit) {\n- warning = 'Lifecycle hook scheduled a cascading update';\n- } else if (commitCountInCurrentWorkLoop > 0) {\n- warning = 'Caused by a cascading update in earlier commit';\n- }\n- hasScheduledUpdateInCurrentCommit = false;\n- commitCountInCurrentWorkLoop++;\n- isCommitting = false;\n- labelsInCurrentCommit.clear();\n-\n- endMark('(Committing Changes)', '(Committing Changes)', warning);\n- },\n-\n- startCommitHostEffectsTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- effectCountInCurrentCommit = 0;\n- beginMark('(Committing Host Effects)');\n- },\n-\n- stopCommitHostEffectsTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- const count = effectCountInCurrentCommit;\n- effectCountInCurrentCommit = 0;\n- endMark(\n- `(Committing Host Effects: ${count} Total)`,\n- '(Committing Host Effects)',\n- null,\n- );\n- },\n-\n- startCommitLifeCyclesTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- effectCountInCurrentCommit = 0;\n- beginMark('(Calling Lifecycle Methods)');\n- },\n-\n- stopCommitLifeCyclesTimer(): void {\n- if (!supportsUserTiming) {\n- return;\n- }\n- const count = effectCountInCurrentCommit;\n- effectCountInCurrentCommit = 0;\n- endMark(\n- `(Calling Lifecycle Methods: ${count} Total)`,\n- '(Calling Lifecycle Methods)',\n- null,\n- );\n- },\n- };\n+\n+ let warning = null;\n+ if (hasScheduledUpdateInCurrentCommit) {\n+ warning = 'Lifecycle hook scheduled a cascading update';\n+ } else if (commitCountInCurrentWorkLoop > 0) {\n+ warning = 'Caused by a cascading update in earlier commit';\n+ }\n+ hasScheduledUpdateInCurrentCommit = false;\n+ commitCountInCurrentWorkLoop++;\n+ isCommitting = false;\n+ labelsInCurrentCommit.clear();\n+\n+ endMark('(Committing Changes)', '(Committing Changes)', warning);\n+ }\n }\n \n-\/\/ TODO: convert to named exports\n-\/\/ if this doesn't inflate the bundle.\n-export default ReactDebugFiberPerf;\n+export function startCommitHostEffectsTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n+ }\n+ effectCountInCurrentCommit = 0;\n+ beginMark('(Committing Host Effects)');\n+ }\n+}\n+\n+export function stopCommitHostEffectsTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n+ }\n+ const count = effectCountInCurrentCommit;\n+ effectCountInCurrentCommit = 0;\n+ endMark(\n+ `(Committing Host Effects: ${count} Total)`,\n+ '(Committing Host Effects)',\n+ null,\n+ );\n+ }\n+}\n+\n+export function startCommitLifeCyclesTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n+ }\n+ effectCountInCurrentCommit = 0;\n+ beginMark('(Calling Lifecycle Methods)');\n+ }\n+}\n+\n+export function stopCommitLifeCyclesTimer(): void {\n+ if (enableUserTimingAPI) {\n+ if (!supportsUserTiming) {\n+ return;\n+ }\n+ const count = effectCountInCurrentCommit;\n+ effectCountInCurrentCommit = 0;\n+ endMark(\n+ `(Calling Lifecycle Methods: ${count} Total)`,\n+ '(Calling Lifecycle Methods)',\n+ null,\n+ );\n+ }\n+}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex f8f72a2370..213ae7cdf8 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -40,7 +40,7 @@ import invariant from 'fbjs\/lib\/invariant';\n import getComponentName from 'shared\/getComponentName';\n import warning from 'fbjs\/lib\/warning';\n import ReactDebugCurrentFiber from '.\/ReactDebugCurrentFiber';\n-import ReactDebugFiberPerf from '.\/ReactDebugFiberPerf';\n+import {cancelWorkTimer} from '.\/ReactDebugFiberPerf';\n \n import ReactFiberClassComponent from '.\/ReactFiberClassComponent';\n import {\n@@ -60,7 +60,6 @@ import {\n } from '.\/ReactFiberContext';\n import {NoWork, Never} from '.\/ReactFiberExpirationTime';\n \n-var {cancelWorkTimer} = ReactDebugFiberPerf;\n if (__DEV__) {\n var warnedAboutStatelessRefs = {};\n }\n@@ -666,9 +665,7 @@ export default function(\n current,\n workInProgress: Fiber,\n ): Fiber | null {\n- if (__DEV__) {\n- cancelWorkTimer(workInProgress);\n- }\n+ cancelWorkTimer(workInProgress);\n \n \/\/ TODO: We should ideally be able to bail out early if the children have no\n \/\/ more work to do. However, since we don't have a separation of this\n@@ -689,9 +686,7 @@ export default function(\n }\n \n function bailoutOnLowPriority(current, workInProgress) {\n- if (__DEV__) {\n- cancelWorkTimer(workInProgress);\n- }\n+ cancelWorkTimer(workInProgress);\n \n \/\/ TODO: Handle HostComponent tags here as well and call pushHostContext()?\n \/\/ See PR 8590 discussion for context\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\nindex 39e3993a1c..e93a2310b0 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.js\n@@ -20,7 +20,7 @@ import shallowEqual from 'fbjs\/lib\/shallowEqual';\n import invariant from 'fbjs\/lib\/invariant';\n import warning from 'fbjs\/lib\/warning';\n \n-import ReactDebugFiberPerf from '.\/ReactDebugFiberPerf';\n+import {startPhaseTimer, stopPhaseTimer} from '.\/ReactDebugFiberPerf';\n import {AsyncUpdates} from '.\/ReactTypeOfInternalContext';\n import {\n cacheContext,\n@@ -34,7 +34,6 @@ import {\n } from '.\/ReactFiberUpdateQueue';\n import {hasContextChanged} from '.\/ReactFiberContext';\n \n-var {startPhaseTimer, stopPhaseTimer} = ReactDebugFiberPerf;\n const fakeInternalInstance = {};\n const isArray = Array.isArray;\n \n@@ -161,17 +160,13 @@ export default function(\n const instance = workInProgress.stateNode;\n const type = workInProgress.type;\n if (typeof instance.shouldComponentUpdate === 'function') {\n- if (__DEV__) {\n- startPhaseTimer(workInProgress, 'shouldComponentUpdate');\n- }\n+ startPhaseTimer(workInProgress, 'shouldComponentUpdate');\n const shouldUpdate = instance.shouldComponentUpdate(\n newProps,\n newState,\n newContext,\n );\n- if (__DEV__) {\n- stopPhaseTimer();\n- }\n+ stopPhaseTimer();\n \n if (__DEV__) {\n warning(\n@@ -365,14 +360,11 @@ export default function(\n }\n \n function callComponentWillMount(workInProgress, instance) {\n- if (__DEV__) {\n- startPhaseTimer(workInProgress, 'componentWillMount');\n- }\n+ startPhaseTimer(workInProgress, 'componentWillMount');\n const oldState = instance.state;\n instance.componentWillMount();\n- if (__DEV__) {\n- stopPhaseTimer();\n- }\n+\n+ stopPhaseTimer();\n \n if (oldState !== instance.state) {\n if (__DEV__) {\n@@ -394,14 +386,10 @@ export default function(\n newProps,\n newContext,\n ) {\n- if (__DEV__) {\n- startPhaseTimer(workInProgress, 'componentWillReceiveProps');\n- }\n+ startPhaseTimer(workInProgress, 'componentWillReceiveProps');\n const oldState = instance.state;\n instance.componentWillReceiveProps(newProps, newContext);\n- if (__DEV__) {\n- stopPhaseTimer();\n- }\n+ stopPhaseTimer();\n \n if (instance.state !== oldState) {\n if (__DEV__) {\n@@ -673,13 +661,9 @@ export default function(\n \n if (shouldUpdate) {\n if (typeof instance.componentWillUpdate === 'function') {\n- if (__DEV__) {\n- startPhaseTimer(workInProgress, 'componentWillUpdate');\n- }\n+ startPhaseTimer(workInProgress, 'componentWillUpdate');\n instance.componentWillUpdate(newProps, newState, newContext);\n- if (__DEV__) {\n- stopPhaseTimer();\n- }\n+ stopPhaseTimer();\n }\n if (typeof instance.componentDidUpdate === 'function') {\n workInProgress.effectTag |= Update;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\nindex 86be8e591d..78da577451 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n@@ -29,10 +29,9 @@ import invariant from 'fbjs\/lib\/invariant';\n \n import {commitCallbacks} from '.\/ReactFiberUpdateQueue';\n import {onCommitUnmount} from '.\/ReactFiberDevToolsHook';\n-import ReactDebugFiberPerf from '.\/ReactDebugFiberPerf';\n+import {startPhaseTimer, stopPhaseTimer} from '.\/ReactDebugFiberPerf';\n \n var {invokeGuardedCallback, hasCaughtError, clearCaughtError} = ReactErrorUtils;\n-var {startPhaseTimer, stopPhaseTimer} = ReactDebugFiberPerf;\n \n export default function(\n config: HostConfig,\n@@ -40,22 +39,20 @@ export default function(\n ) {\n const {getPublicInstance, mutation, persistence} = config;\n \n- if (__DEV__) {\n- var callComponentWillUnmountWithTimerInDev = function(current, instance) {\n- startPhaseTimer(current, 'componentWillUnmount');\n- instance.props = current.memoizedProps;\n- instance.state = current.memoizedState;\n- instance.componentWillUnmount();\n- stopPhaseTimer();\n- };\n- }\n+ var callComponentWillUnmountWithTimer = function(current, instance) {\n+ startPhaseTimer(current, 'componentWillUnmount');\n+ instance.props = current.memoizedProps;\n+ instance.state = current.memoizedState;\n+ instance.componentWillUnmount();\n+ stopPhaseTimer();\n+ };\n \n \/\/ Capture errors so they don't interrupt unmounting.\n function safelyCallComponentWillUnmount(current, instance) {\n if (__DEV__) {\n invokeGuardedCallback(\n null,\n- callComponentWillUnmountWithTimerInDev,\n+ callComponentWillUnmountWithTimer,\n null,\n current,\n instance,\n@@ -66,9 +63,7 @@ export default function(\n }\n } else {\n try {\n- instance.props = current.memoizedProps;\n- instance.state = current.memoizedState;\n- instance.componentWillUnmount();\n+ callComponentWillUnmountWithTimer(current, instance);\n } catch (unmountError) {\n captureError(current, unmountError);\n }\n@@ -100,27 +95,19 @@ export default function(\n const instance = finishedWork.stateNode;\n if (finishedWork.effectTag & Update) {\n if (current === null) {\n- if (__DEV__) {\n- startPhaseTimer(finishedWork, 'componentDidMount');\n- }\n+ startPhaseTimer(finishedWork, 'componentDidMount');\n instance.props = finishedWork.memoizedProps;\n instance.state = finishedWork.memoizedState;\n instance.componentDidMount();\n- if (__DEV__) {\n- stopPhaseTimer();\n- }\n+ stopPhaseTimer();\n } else {\n const prevProps = current.memoizedProps;\n const prevState = current.memoizedState;\n- if (__DEV__) {\n- startPhaseTimer(finishedWork, 'componentDidUpdate');\n- }\n+ startPhaseTimer(finishedWork, 'componentDidUpdate');\n instance.props = finishedWork.memoizedProps;\n instance.state = finishedWork.memoizedState;\n instance.componentDidUpdate(prevProps, prevState);\n- if (__DEV__) {\n- stopPhaseTimer();\n- }\n+ stopPhaseTimer();\n }\n }\n const updateQueue = finishedWork.updateQueue;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberContext.js b\/packages\/react-reconciler\/src\/ReactFiberContext.js\nindex b28fb478b2..231ee6da51 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberContext.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberContext.js\n@@ -20,9 +20,7 @@ import checkPropTypes from 'prop-types\/checkPropTypes';\n \n import {createCursor, pop, push} from '.\/ReactFiberStack';\n import ReactDebugCurrentFiber from '.\/ReactDebugCurrentFiber';\n-import ReactDebugFiberPerf from '.\/ReactDebugFiberPerf';\n-\n-const {startPhaseTimer, stopPhaseTimer} = ReactDebugFiberPerf;\n+import {startPhaseTimer, stopPhaseTimer} from '.\/ReactDebugFiberPerf';\n \n if (__DEV__) {\n var warnedAboutMissingGetChildContext = {};\n@@ -177,12 +175,12 @@ export function processChildContext(\n let childContext;\n if (__DEV__) {\n ReactDebugCurrentFiber.setCurrentPhase('getChildContext');\n- startPhaseTimer(fiber, 'getChildContext');\n- childContext = instance.getChildContext();\n- stopPhaseTimer();\n+ }\n+ startPhaseTimer(fiber, 'getChildContext');\n+ childContext = instance.getChildContext();\n+ stopPhaseTimer();\n+ if (__DEV__) {\n ReactDebugCurrentFiber.setCurrentPhase(null);\n- } else {\n- childContext = instance.getChildContext();\n }\n for (let contextKey in childContext) {\n invariant(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberScheduler.js b\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\nindex 406ab8513b..19dfef14aa 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\n@@ -46,7 +46,21 @@ import ReactFiberHostContext from '.\/ReactFiberHostContext';\n import ReactFiberHydrationContext from '.\/ReactFiberHydrationContext';\n import ReactFiberInstrumentation from '.\/ReactFiberInstrumentation';\n import ReactDebugCurrentFiber from '.\/ReactDebugCurrentFiber';\n-import ReactDebugFiberPerf from '.\/ReactDebugFiberPerf';\n+import {\n+ recordEffect,\n+ recordScheduleUpdate,\n+ startWorkTimer,\n+ stopWorkTimer,\n+ stopFailedWorkTimer,\n+ startWorkLoopTimer,\n+ stopWorkLoopTimer,\n+ startCommitTimer,\n+ stopCommitTimer,\n+ startCommitHostEffectsTimer,\n+ stopCommitHostEffectsTimer,\n+ startCommitLifeCyclesTimer,\n+ stopCommitLifeCyclesTimer,\n+} from '.\/ReactDebugFiberPerf';\n import {popContextProvider} from '.\/ReactFiberContext';\n import {reset} from '.\/ReactFiberStack';\n import {logCapturedError} from '.\/ReactFiberErrorLogger';\n@@ -64,21 +78,6 @@ import {getUpdateExpirationTime} from '.\/ReactFiberUpdateQueue';\n import {resetContext} from '.\/ReactFiberContext';\n \n var {invokeGuardedCallback, hasCaughtError, clearCaughtError} = ReactErrorUtils;\n-var {\n- recordEffect,\n- recordScheduleUpdate,\n- startWorkTimer,\n- stopWorkTimer,\n- stopFailedWorkTimer,\n- startWorkLoopTimer,\n- stopWorkLoopTimer,\n- startCommitTimer,\n- stopCommitTimer,\n- startCommitHostEffectsTimer,\n- stopCommitHostEffectsTimer,\n- startCommitLifeCyclesTimer,\n- stopCommitLifeCyclesTimer,\n-} = ReactDebugFiberPerf;\n \n export type CapturedError = {\n componentName: ?string,\n@@ -229,8 +228,8 @@ export default function(\n while (nextEffect !== null) {\n if (__DEV__) {\n ReactDebugCurrentFiber.setCurrentFiber(nextEffect);\n- recordEffect();\n }\n+ recordEffect();\n \n const effectTag = nextEffect.effectTag;\n if (effectTag & ContentReset) {\n@@ -298,24 +297,18 @@ export default function(\n const effectTag = nextEffect.effectTag;\n \n if (effectTag & (Update | Callback)) {\n- if (__DEV__) {\n- recordEffect();\n- }\n+ recordEffect();\n const current = nextEffect.alternate;\n commitLifeCycles(current, nextEffect);\n }\n \n if (effectTag & Ref) {\n- if (__DEV__) {\n- recordEffect();\n- }\n+ recordEffect();\n commitAttachRef(nextEffect);\n }\n \n if (effectTag & Err) {\n- if (__DEV__) {\n- recordEffect();\n- }\n+ recordEffect();\n commitErrorHandling(nextEffect);\n }\n \n@@ -338,9 +331,7 @@ export default function(\n \/\/ captured elsewhere, to prevent the unmount from being interrupted.\n isWorking = true;\n isCommitting = true;\n- if (__DEV__) {\n- startCommitTimer();\n- }\n+ startCommitTimer();\n \n const root: FiberRoot = finishedWork.stateNode;\n invariant(\n@@ -377,9 +368,7 @@ export default function(\n \/\/ The first pass performs all the host insertions, updates, deletions and\n \/\/ ref unmounts.\n nextEffect = firstEffect;\n- if (__DEV__) {\n- startCommitHostEffectsTimer();\n- }\n+ startCommitHostEffectsTimer();\n while (nextEffect !== null) {\n let didError = false;\n let error;\n@@ -410,9 +399,7 @@ export default function(\n }\n }\n }\n- if (__DEV__) {\n- stopCommitHostEffectsTimer();\n- }\n+ stopCommitHostEffectsTimer();\n \n resetAfterCommit();\n \n@@ -427,9 +414,7 @@ export default function(\n \/\/ and deletions in the entire tree have already been invoked.\n \/\/ This pass also triggers any renderer-specific initial effects.\n nextEffect = firstEffect;\n- if (__DEV__) {\n- startCommitLifeCyclesTimer();\n- }\n+ startCommitLifeCyclesTimer();\n while (nextEffect !== null) {\n let didError = false;\n let error;\n@@ -462,10 +447,8 @@ export default function(\n \n isCommitting = false;\n isWorking = false;\n- if (__DEV__) {\n- stopCommitLifeCyclesTimer();\n- stopCommitTimer();\n- }\n+ stopCommitLifeCyclesTimer();\n+ stopCommitTimer();\n if (typeof onCommitRoot === 'function') {\n onCommitRoot(finishedWork.stateNode);\n }\n@@ -551,9 +534,7 @@ export default function(\n resetExpirationTime(workInProgress, nextRenderExpirationTime);\n \n if (next !== null) {\n- if (__DEV__) {\n- stopWorkTimer(workInProgress);\n- }\n+ stopWorkTimer(workInProgress);\n if (__DEV__ && ReactFiberInstrumentation.debugTool) {\n ReactFiberInstrumentation.debugTool.onCompleteWork(workInProgress);\n }\n@@ -595,9 +576,7 @@ export default function(\n }\n }\n \n- if (__DEV__) {\n- stopWorkTimer(workInProgress);\n- }\n+ stopWorkTimer(workInProgress);\n if (__DEV__ && ReactFiberInstrumentation.debugTool) {\n ReactFiberInstrumentation.debugTool.onCompleteWork(workInProgress);\n }\n@@ -631,8 +610,8 @@ export default function(\n const current = workInProgress.alternate;\n \n \/\/ See if beginning this work spawns more work.\n+ startWorkTimer(workInProgress);\n if (__DEV__) {\n- startWorkTimer(workInProgress);\n ReactDebugCurrentFiber.setCurrentFiber(workInProgress);\n }\n let next = beginWork(current, workInProgress, nextRenderExpirationTime);\n@@ -661,8 +640,8 @@ export default function(\n const current = workInProgress.alternate;\n \n \/\/ See if beginning this work spawns more work.\n+ startWorkTimer(workInProgress);\n if (__DEV__) {\n- startWorkTimer(workInProgress);\n ReactDebugCurrentFiber.setCurrentFiber(workInProgress);\n }\n let next = beginFailedWork(\n@@ -773,9 +752,7 @@ export default function(\n root: FiberRoot,\n expirationTime: ExpirationTime,\n ): Fiber | null {\n- if (__DEV__) {\n- startWorkLoopTimer();\n- }\n+ startWorkLoopTimer();\n \n invariant(\n !isWorking,\n@@ -892,9 +869,7 @@ export default function(\n didFatal = false;\n firstUncaughtError = null;\n \n- if (__DEV__) {\n- stopWorkLoopTimer();\n- }\n+ stopWorkLoopTimer();\n \n if (uncaughtError !== null) {\n onUncaughtError(uncaughtError);\n@@ -1131,11 +1106,9 @@ export default function(\n break;\n }\n if (node === to || node.alternate === to) {\n- if (__DEV__) {\n- stopFailedWorkTimer(node);\n- }\n+ stopFailedWorkTimer(node);\n break;\n- } else if (__DEV__) {\n+ } else {\n stopWorkTimer(node);\n }\n node = node.return;\n@@ -1190,9 +1163,7 @@ export default function(\n expirationTime: ExpirationTime,\n isErrorRecovery: boolean,\n ) {\n- if (__DEV__) {\n- recordScheduleUpdate();\n- }\n+ recordScheduleUpdate();\n \n if (__DEV__) {\n if (!isErrorRecovery && fiber.tag === ClassComponent) {\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 12c109e30f..4c86b348e9 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -7,12 +7,15 @@\n * @flow\n *\/\n \n+import invariant from 'fbjs\/lib\/invariant';\n+\n export const enableAsyncSubtreeAPI = true;\n export const enableAsyncSchedulingByDefaultInReactDOM = false;\n \/\/ Exports React.Fragment\n export const enableReactFragment = false;\n \/\/ Exports ReactDOM.createRoot\n export const enableCreateRoot = false;\n+export const enableUserTimingAPI = __DEV__;\n \n \/\/ Mutating mode (React DOM, React ART, React Native):\n export const enableMutatingReconciler = true;\n@@ -20,3 +23,8 @@ export const enableMutatingReconciler = true;\n export const enableNoopReconciler = false;\n \/\/ Experimental persistent mode (CS):\n export const enablePersistentReconciler = false;\n+\n+\/\/ Only used in www builds.\n+export function addUserTimingListener() {\n+ invariant(false, 'Not implemented.');\n+}\ndiff --git a\/scripts\/rollup\/shims\/rollup\/ReactFeatureFlags-www.js b\/scripts\/rollup\/shims\/rollup\/ReactFeatureFlags-www.js\nindex 9958c52673..90b1cad885 100644\n--- a\/scripts\/rollup\/shims\/rollup\/ReactFeatureFlags-www.js\n+++ b\/scripts\/rollup\/shims\/rollup\/ReactFeatureFlags-www.js\n@@ -16,11 +16,38 @@ export const {\n enableAsyncSchedulingByDefaultInReactDOM,\n enableReactFragment,\n enableCreateRoot,\n+ \/\/ Reconciler flags\n enableMutatingReconciler,\n enableNoopReconciler,\n enablePersistentReconciler,\n } = require('ReactFeatureFlags');\n \n+export let enableUserTimingAPI = __DEV__;\n+\n+let refCount = 0;\n+export function addUserTimingListener() {\n+ if (__DEV__) {\n+ \/\/ Noop.\n+ return () => {};\n+ }\n+ refCount++;\n+ updateFlagOutsideOfReactCallStack();\n+ return () => {\n+ refCount--;\n+ updateFlagOutsideOfReactCallStack();\n+ };\n+}\n+\n+let timeout = null;\n+function updateFlagOutsideOfReactCallStack() {\n+ if (!timeout) {\n+ timeout = setTimeout(() => {\n+ timeout = null;\n+ enableUserTimingAPI = refCount > 0;\n+ });\n+ }\n+}\n+\n \/\/ Flow magic to verify the exports of this file match the original version.\n \/\/ eslint-disable-next-line no-unused-vars\n type Check<_X, Y: _X, X: Y=_X> = null;\n"}

dillon1000/react

Files changed