| null = null;
@@ -221,9 +222,9 @@ const TestRenderer = ReactFiberReconciler({
getPublicInstance,
- now(): number {
- return currentTime;
- },
+ // This approach enables `now` to be mocked by tests,
+ // Even after the reconciler has initialized and read host config values.
+ now: () => nowImplementation(),
mutation: {
commitUpdate(
@@ -383,6 +384,7 @@ function toTree(node: ?Fiber) {
case ContextProvider:
case ContextConsumer:
case Mode:
+ case Profiler:
case ForwardRef:
return childrenToTree(node.child);
default:
@@ -486,6 +488,7 @@ class ReactTestInstance {
case ContextProvider:
case ContextConsumer:
case Mode:
+ case Profiler:
descend = true;
break;
default:
@@ -737,7 +740,11 @@ const ReactTestRendererFiber = {
}
return TestRenderer.getPublicRootInstance(root);
},
- unstable_flushSync: TestRenderer.flushSync,
+ unstable_flushSync(fn: Function) {
+ yieldedValues = [];
+ TestRenderer.flushSync(fn);
+ return yieldedValues;
+ },
};
Object.defineProperty(
@@ -761,6 +768,10 @@ const ReactTestRendererFiber = {
/* eslint-disable camelcase */
unstable_batchedUpdates: batchedUpdates,
/* eslint-enable camelcase */
+
+ unstable_setNowImplementation(implementation: () => number): void {
+ nowImplementation = implementation;
+ },
};
export default ReactTestRendererFiber;
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
index b20f316d9ed..ce62bba2807 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
@@ -230,6 +230,32 @@ describe('ReactShallowRenderer', () => {
]);
});
+ it('should handle Profiler', () => {
+ class SomeComponent extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+ }
+
+ const shallowRenderer = createRenderer();
+ const result = shallowRenderer.render();
+
+ expect(result.type).toBe(React.unstable_Profiler);
+ expect(result.props.children).toEqual(
+
+
+
+
,
+ );
+ });
+
it('should enable shouldComponentUpdate to prevent a re-render', () => {
let renderCounter = 0;
class SimpleComponent extends React.Component {
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
index e6f3909b0b4..cefef5657c8 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
@@ -37,7 +37,9 @@ describe('ReactTestRendererTraversal', () => {
-
+ {}}>
+
+
);
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index d3a52cf61c4..d4740406116 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -8,9 +8,10 @@
import assign from 'object-assign';
import ReactVersion from 'shared/ReactVersion';
import {
+ REACT_ASYNC_MODE_TYPE,
REACT_FRAGMENT_TYPE,
+ REACT_PROFILER_TYPE,
REACT_STRICT_MODE_TYPE,
- REACT_ASYNC_MODE_TYPE,
} from 'shared/ReactSymbols';
import {Component, PureComponent} from './ReactBaseClasses';
@@ -51,6 +52,7 @@ const React = {
Fragment: REACT_FRAGMENT_TYPE,
StrictMode: REACT_STRICT_MODE_TYPE,
unstable_AsyncMode: REACT_ASYNC_MODE_TYPE,
+ unstable_Profiler: REACT_PROFILER_TYPE,
createElement: __DEV__ ? createElementWithValidation : createElement,
cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
new file mode 100644
index 00000000000..e97d8eeef97
--- /dev/null
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -0,0 +1,862 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactTestRenderer;
+
+function loadModules({
+ enableProfilerTimer = true,
+ replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
+} = {}) {
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
+ ReactFeatureFlags.debugRenderPhaseSideEffects = false;
+ ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+ ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
+ ReactFeatureFlags.enableGetDerivedStateFromCatch = true;
+ ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = replayFailedUnitOfWorkWithInvokeGuardedCallback;
+ React = require('react');
+ ReactTestRenderer = require('react-test-renderer');
+}
+
+describe('Profiler', () => {
+ describe('works in profiling and non-profiling bundles', () => {
+ [true, false].forEach(flagEnabled => {
+ describe(`enableProfilerTimer ${
+ flagEnabled ? 'enabled' : 'disabled'
+ }`, () => {
+ beforeEach(() => {
+ jest.resetModules();
+
+ loadModules({enableProfilerTimer: flagEnabled});
+ });
+
+ // This will throw in production too,
+ // But the test is only interested in verifying the DEV error message.
+ if (__DEV__) {
+ it('should warn if required params are missing', () => {
+ expect(() => {
+ ReactTestRenderer.create();
+ }).toThrow(
+ 'Profiler must specify an "id" string and "onRender" function as props',
+ );
+ });
+ }
+
+ it('should support an empty Profiler (with no children)', () => {
+ // As root
+ expect(
+ ReactTestRenderer.create(
+ ,
+ ).toJSON(),
+ ).toMatchSnapshot();
+
+ // As non-root
+ expect(
+ ReactTestRenderer.create(
+
+
+
,
+ ).toJSON(),
+ ).toMatchSnapshot();
+ });
+
+ it('should render children', () => {
+ const FunctionalComponent = ({label}) => {label};
+ const renderer = ReactTestRenderer.create(
+
+ outside span
+
+ inside span
+
+
+
,
+ );
+ expect(renderer.toJSON()).toMatchSnapshot();
+ });
+
+ it('should support nested Profilers', () => {
+ const FunctionalComponent = ({label}) => {label}
;
+ class ClassComponent extends React.Component {
+ render() {
+ return {this.props.label};
+ }
+ }
+ const renderer = ReactTestRenderer.create(
+
+
+
+
+ inner span
+
+ ,
+ );
+ expect(renderer.toJSON()).toMatchSnapshot();
+ });
+ });
+ });
+ });
+
+ describe('onRender callback', () => {
+ let AdvanceTime;
+ let advanceTimeBy;
+
+ const mockNowForTests = () => {
+ let currentTime = 0;
+ ReactTestRenderer.unstable_setNowImplementation(() => currentTime);
+ advanceTimeBy = amount => {
+ currentTime += amount;
+ };
+ };
+
+ beforeEach(() => {
+ jest.resetModules();
+
+ loadModules();
+ mockNowForTests();
+
+ AdvanceTime = class extends React.Component {
+ static defaultProps = {
+ byAmount: 10,
+ shouldComponentUpdate: true,
+ };
+ shouldComponentUpdate(nextProps) {
+ return nextProps.shouldComponentUpdate;
+ }
+ render() {
+ // Simulate time passing when this component is rendered
+ advanceTimeBy(this.props.byAmount);
+ return this.props.children || null;
+ }
+ };
+ });
+
+ it('is not invoked until the commit phase', () => {
+ const callback = jest.fn();
+
+ const Yield = ({value}) => {
+ renderer.unstable_yield(value);
+ return null;
+ };
+
+ const renderer = ReactTestRenderer.create(
+
+
+
+ ,
+ {
+ unstable_isAsync: true,
+ },
+ );
+
+ // Times are logged until a render is committed.
+ renderer.unstable_flushThrough(['first']);
+ expect(callback).toHaveBeenCalledTimes(0);
+ expect(renderer.unstable_flushAll()).toEqual(['last']);
+ expect(callback).toHaveBeenCalledTimes(1);
+ });
+
+ it('logs render times for both mount and update', () => {
+ const callback = jest.fn();
+
+ const renderer = ReactTestRenderer.create(
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(1);
+
+ let [call] = callback.mock.calls;
+
+ expect(call).toHaveLength(4);
+ expect(call[0]).toBe('test');
+ expect(call[1]).toBe('mount');
+ expect(call[2]).toBe(10); // "actual" time
+ expect(call[3]).toBe(10); // "base" time
+
+ callback.mockReset();
+
+ renderer.update(
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(1);
+
+ [call] = callback.mock.calls;
+
+ expect(call).toHaveLength(4);
+ expect(call[0]).toBe('test');
+ expect(call[1]).toBe('update');
+ expect(call[2]).toBe(10); // "actual" time
+ expect(call[3]).toBe(10); // "base" time
+ });
+
+ it('includes render times of nested Profilers in their parent times', () => {
+ const callback = jest.fn();
+
+ ReactTestRenderer.create(
+
+
+
+
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ // Callbacks bubble (reverse order).
+ const [childCall, parentCall] = callback.mock.calls;
+ expect(childCall[0]).toBe('child');
+ expect(parentCall[0]).toBe('parent');
+
+ // Parent times should include child times
+ expect(childCall[2]).toBe(20); // "actual" time
+ expect(childCall[3]).toBe(20); // "base" time
+ expect(parentCall[2]).toBe(30); // "actual" time
+ expect(parentCall[3]).toBe(30); // "base" time
+ });
+
+ it('tracks sibling Profilers separately', () => {
+ const callback = jest.fn();
+
+ ReactTestRenderer.create(
+
+
+
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ const [firstCall, secondCall] = callback.mock.calls;
+ expect(firstCall[0]).toBe('first');
+ expect(secondCall[0]).toBe('second');
+
+ // Parent times should include child times
+ expect(firstCall[2]).toBe(20); // "actual" time
+ expect(firstCall[3]).toBe(20); // "base" time
+ expect(secondCall[2]).toBe(5); // "actual" time
+ expect(secondCall[3]).toBe(5); // "base" time
+ });
+
+ it('does not include time spent outside of profile root', () => {
+ const callback = jest.fn();
+
+ ReactTestRenderer.create(
+
+
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(1);
+
+ const [call] = callback.mock.calls;
+ expect(call[0]).toBe('test');
+ expect(call[2]).toBe(5); // "actual" time
+ expect(call[3]).toBe(5); // "base" time
+ });
+
+ it('is not called when blocked by sCU false', () => {
+ const callback = jest.fn();
+
+ let instance;
+ class Updater extends React.Component {
+ state = {};
+ render() {
+ instance = this;
+ return this.props.children;
+ }
+ }
+
+ class Pure extends React.PureComponent {
+ render() {
+ return this.props.children;
+ }
+ }
+
+ const renderer = ReactTestRenderer.create(
+
+
+
+
+
+
+
+
+
+
+ ,
+ );
+
+ // All profile callbacks are called for initial render
+ expect(callback).toHaveBeenCalledTimes(3);
+
+ callback.mockReset();
+
+ renderer.unstable_flushSync(() => {
+ instance.setState({
+ count: 1,
+ });
+ });
+
+ // Only call profile updates for paths that have re-rendered
+ // Since "inner" is beneath a pure compoent, it isn't called
+ expect(callback).toHaveBeenCalledTimes(2);
+ expect(callback.mock.calls[0][0]).toBe('middle');
+ expect(callback.mock.calls[1][0]).toBe('outer');
+ });
+
+ it('decreases "actual" time but not "base" time when sCU prevents an update', () => {
+ const callback = jest.fn();
+
+ const renderer = ReactTestRenderer.create(
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(1);
+
+ renderer.update(
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ const [mountCall, updateCall] = callback.mock.calls;
+
+ expect(mountCall[1]).toBe('mount');
+ expect(mountCall[2]).toBe(20); // "actual" time
+ expect(mountCall[3]).toBe(20); // "base" time
+
+ expect(updateCall[1]).toBe('update');
+ expect(updateCall[2]).toBe(10); // "actual" time
+ expect(updateCall[3]).toBe(20); // "base" time
+ });
+
+ it('includes time spent in render phase lifecycles', () => {
+ class WithLifecycles extends React.Component {
+ state = {};
+ static getDerivedStateFromProps() {
+ advanceTimeBy(3);
+ return null;
+ }
+ shouldComponentUpdate() {
+ advanceTimeBy(7);
+ return true;
+ }
+ render() {
+ advanceTimeBy(5);
+ return null;
+ }
+ }
+
+ const callback = jest.fn();
+
+ const renderer = ReactTestRenderer.create(
+
+
+ ,
+ );
+
+ renderer.update(
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ const [mountCall, updateCall] = callback.mock.calls;
+
+ expect(mountCall[1]).toBe('mount');
+ expect(mountCall[2]).toBe(8); // "actual" time
+ expect(mountCall[3]).toBe(8); // "base" time
+
+ expect(updateCall[1]).toBe('update');
+ expect(updateCall[2]).toBe(15); // "actual" time
+ expect(updateCall[3]).toBe(15); // "base" time
+ });
+
+ describe('with regard to interruptions', () => {
+ it('should accumulate "actual" time after a scheduling interruptions', () => {
+ const callback = jest.fn();
+
+ const Yield = ({renderTime}) => {
+ advanceTimeBy(renderTime);
+ renderer.unstable_yield('Yield:' + renderTime);
+ return null;
+ };
+
+ // Render partially, but run out of time before completing.
+ const renderer = ReactTestRenderer.create(
+
+
+
+ ,
+ {unstable_isAsync: true},
+ );
+ expect(renderer.unstable_flushThrough(['Yield:2'])).toEqual([
+ 'Yield:2',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(0);
+
+ // Resume render for remaining children.
+ expect(renderer.unstable_flushAll()).toEqual(['Yield:3']);
+
+ // Verify that logged times include both durations above.
+ expect(callback).toHaveBeenCalledTimes(1);
+ expect(callback.mock.calls[0][2]).toBe(5); // "actual" time
+ expect(callback.mock.calls[0][3]).toBe(5); // "base" time
+ });
+
+ it('should not include time between frames', () => {
+ const callback = jest.fn();
+
+ const Yield = ({renderTime}) => {
+ advanceTimeBy(renderTime);
+ renderer.unstable_yield('Yield:' + renderTime);
+ return null;
+ };
+
+ // Render partially, but don't finish.
+ // This partial render should take 5ms of simulated time.
+ const renderer = ReactTestRenderer.create(
+
+
+
+
+
+
+ ,
+ {unstable_isAsync: true},
+ );
+ expect(renderer.unstable_flushThrough(['Yield:5'])).toEqual([
+ 'Yield:5',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(0);
+
+ // Simulate time moving forward while frame is paused.
+ advanceTimeBy(50);
+
+ // Flush the remaninig work,
+ // Which should take an additional 10ms of simulated time.
+ expect(renderer.unstable_flushAll()).toEqual(['Yield:10', 'Yield:17']);
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ const [innerCall, outerCall] = callback.mock.calls;
+
+ // Verify that the "actual" time includes all work times,
+ // But not the time that elapsed between frames.
+ expect(innerCall[0]).toBe('inner');
+ expect(innerCall[2]).toBe(17); // "actual" time
+ expect(innerCall[3]).toBe(17); // "base" time
+ expect(outerCall[0]).toBe('outer');
+ expect(outerCall[2]).toBe(32); // "actual" time
+ expect(outerCall[3]).toBe(32); // "base" time
+ });
+
+ it('should report the expected times when a high-priority update replaces an in-progress initial render', () => {
+ const callback = jest.fn();
+
+ const Yield = ({renderTime}) => {
+ advanceTimeBy(renderTime);
+ renderer.unstable_yield('Yield:' + renderTime);
+ return null;
+ };
+
+ // Render a partially update, but don't finish.
+ // This partial render should take 10ms of simulated time.
+ const renderer = ReactTestRenderer.create(
+
+
+
+ ,
+ {unstable_isAsync: true},
+ );
+ expect(renderer.unstable_flushThrough(['first'])).toEqual(['Yield:10']);
+ expect(callback).toHaveBeenCalledTimes(0);
+
+ // Simulate time moving forward while frame is paused.
+ advanceTimeBy(100);
+
+ // Interrupt with higher priority work.
+ // The interrupted work simulates an additional 5ms of time.
+ expect(
+ renderer.unstable_flushSync(() => {
+ renderer.update(
+
+
+ ,
+ );
+ }),
+ ).toEqual(['Yield:5']);
+
+ // The initial work was thrown away in this case,
+ // So the "actual" and "base" times should only include the final rendered tree times.
+ expect(callback).toHaveBeenCalledTimes(1);
+ let call = callback.mock.calls[0];
+ expect(call[2]).toBe(5); // "actual" time
+ expect(call[3]).toBe(5); // "base" time
+
+ callback.mockReset();
+
+ // Verify no more unexpected callbacks from low priority work
+ expect(renderer.unstable_flushAll()).toEqual([]);
+ expect(callback).toHaveBeenCalledTimes(0);
+ });
+
+ it('should report the expected times when a high-priority update replaces a low-priority update', () => {
+ const callback = jest.fn();
+
+ const Yield = ({renderTime}) => {
+ advanceTimeBy(renderTime);
+ renderer.unstable_yield('Yield:' + renderTime);
+ return null;
+ };
+
+ const renderer = ReactTestRenderer.create(
+
+
+
+ ,
+ {unstable_isAsync: true},
+ );
+
+ // Render everything initially.
+ // This should take 21 seconds of "actual" and "base" time.
+ expect(renderer.unstable_flushAll()).toEqual(['Yield:6', 'Yield:15']);
+ expect(callback).toHaveBeenCalledTimes(1);
+ let call = callback.mock.calls[0];
+ expect(call[2]).toBe(21); // "actual" time
+ expect(call[3]).toBe(21); // "base" time
+
+ callback.mockReset();
+
+ // Render a partially update, but don't finish.
+ // This partial render should take 3ms of simulated time.
+ renderer.update(
+
+
+
+
+ ,
+ );
+ expect(renderer.unstable_flushThrough(['Yield:3'])).toEqual([
+ 'Yield:3',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(0);
+
+ // Simulate time moving forward while frame is paused.
+ advanceTimeBy(100);
+
+ // Render another 5ms of simulated time.
+ expect(renderer.unstable_flushThrough(['Yield:5'])).toEqual([
+ 'Yield:5',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(0);
+
+ // Simulate time moving forward while frame is paused.
+ advanceTimeBy(100);
+
+ // Interrupt with higher priority work.
+ // The interrupted work simulates an additional 11ms of time.
+ expect(
+ renderer.unstable_flushSync(() => {
+ renderer.update(
+
+
+ ,
+ );
+ }),
+ ).toEqual(['Yield:11']);
+
+ // Verify that the "actual" time includes all three durations above.
+ // And the "base" time includes only the final rendered tree times.
+ expect(callback).toHaveBeenCalledTimes(1);
+ call = callback.mock.calls[0];
+ expect(call[2]).toBe(19); // "actual" time
+ expect(call[3]).toBe(11); // "base" time
+
+ // Verify no more unexpected callbacks from low priority work
+ expect(renderer.unstable_flushAll()).toEqual([]);
+ expect(callback).toHaveBeenCalledTimes(1);
+ });
+
+ it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
+ const callback = jest.fn();
+
+ const Yield = ({renderTime}) => {
+ advanceTimeBy(renderTime);
+ renderer.unstable_yield('Yield:' + renderTime);
+ return null;
+ };
+
+ let first;
+ class FirstComponent extends React.Component {
+ state = {renderTime: 1};
+ render() {
+ first = this;
+ advanceTimeBy(this.state.renderTime);
+ renderer.unstable_yield('FirstComponent:' + this.state.renderTime);
+ return ;
+ }
+ }
+ let second;
+ class SecondComponent extends React.Component {
+ state = {renderTime: 2};
+ render() {
+ second = this;
+ advanceTimeBy(this.state.renderTime);
+ renderer.unstable_yield('SecondComponent:' + this.state.renderTime);
+ return ;
+ }
+ }
+
+ const renderer = ReactTestRenderer.create(
+
+
+
+ ,
+ {unstable_isAsync: true},
+ );
+
+ // Render everything initially.
+ // This simulates a total of 14ms of "actual" render time.
+ // The "base" render time is also 14ms for the initial render.
+ expect(renderer.unstable_flushAll()).toEqual([
+ 'FirstComponent:1',
+ 'Yield:4',
+ 'SecondComponent:2',
+ 'Yield:7',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(1);
+ let call = callback.mock.calls[0];
+ expect(call[2]).toBe(14); // "actual" time
+ expect(call[3]).toBe(14); // "base" time
+
+ callback.mockClear();
+
+ // Render a partially update, but don't finish.
+ // This partial render will take 10ms of "actual" render time.
+ first.setState({renderTime: 10});
+ expect(renderer.unstable_flushThrough(['FirstComponent:10'])).toEqual([
+ 'FirstComponent:10',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(0);
+
+ // Simulate time moving forward while frame is paused.
+ advanceTimeBy(100);
+
+ // Interrupt with higher priority work.
+ // This simulates a total of 37ms of "actual" render time.
+ expect(
+ renderer.unstable_flushSync(() => second.setState({renderTime: 30})),
+ ).toEqual(['SecondComponent:30', 'Yield:7']);
+
+ // Verify that the "actual" time includes time spent in the both renders so far (10ms and 37ms).
+ // The "base" time should include the more recent times for the SecondComponent subtree,
+ // As well as the original times for the FirstComponent subtree.
+ expect(callback).toHaveBeenCalledTimes(1);
+ call = callback.mock.calls[0];
+ expect(call[2]).toBe(47); // "actual" time
+ expect(call[3]).toBe(42); // "base" time
+
+ callback.mockClear();
+
+ // Resume the original low priority update, with rebased state.
+ // This simulates a total of 14ms of "actual" render time,
+ // And does not include the original (interrupted) 10ms.
+ // The tree contains 42ms of "base" render time at this point,
+ // Reflecting the most recent (longer) render durations.
+ // TODO: This "actual" time should decrease by 10ms once the scheduler supports resuming.
+ expect(renderer.unstable_flushAll()).toEqual([
+ 'FirstComponent:10',
+ 'Yield:4',
+ ]);
+ expect(callback).toHaveBeenCalledTimes(1);
+ call = callback.mock.calls[0];
+ expect(call[2]).toBe(14); // "actual" time
+ expect(call[3]).toBe(51); // "base" time
+ });
+
+ [true, false].forEach(flagEnabled => {
+ describe(`replayFailedUnitOfWorkWithInvokeGuardedCallback ${
+ flagEnabled ? 'enabled' : 'disabled'
+ }`, () => {
+ beforeEach(() => {
+ jest.resetModules();
+
+ loadModules({
+ replayFailedUnitOfWorkWithInvokeGuardedCallback: flagEnabled,
+ });
+ mockNowForTests();
+ });
+
+ it('should accumulate "actual" time after an error handled by componentDidCatch()', () => {
+ const callback = jest.fn();
+
+ const ThrowsError = () => {
+ advanceTimeBy(10);
+ throw Error('expected error');
+ };
+
+ class ErrorBoundary extends React.Component {
+ state = {error: null};
+ componentDidCatch(error) {
+ this.setState({error});
+ }
+ render() {
+ advanceTimeBy(2);
+ return this.state.error === null ? (
+ this.props.children
+ ) : (
+
+ );
+ }
+ }
+
+ ReactTestRenderer.create(
+
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ // Callbacks bubble (reverse order).
+ let [mountCall, updateCall] = callback.mock.calls;
+
+ // The initial mount only includes the ErrorBoundary (which takes 2ms)
+ // But it spends time rendering all of the failed subtree also.
+ expect(mountCall[1]).toBe('mount');
+ // "actual" time includes: 2 (ErrorBoundary) + 5 (AdvanceTime) + 10 (ThrowsError)
+ // If replayFailedUnitOfWorkWithInvokeGuardedCallback is enbaled, ThrowsError is replayed.
+ expect(mountCall[2]).toBe(flagEnabled && __DEV__ ? 27 : 17);
+ // "base" time includes: 2 (ErrorBoundary)
+ expect(mountCall[3]).toBe(2);
+
+ // The update includes the ErrorBoundary and its fallback child
+ expect(updateCall[1]).toBe('update');
+ // "actual" time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
+ expect(updateCall[2]).toBe(22);
+ // "base" time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
+ expect(updateCall[3]).toBe(22);
+ });
+
+ it('should accumulate "actual" time after an error handled by getDerivedStateFromCatch()', () => {
+ const callback = jest.fn();
+
+ const ThrowsError = () => {
+ advanceTimeBy(10);
+ throw Error('expected error');
+ };
+
+ class ErrorBoundary extends React.Component {
+ state = {error: null};
+ static getDerivedStateFromCatch(error) {
+ return {error};
+ }
+ render() {
+ advanceTimeBy(2);
+ return this.state.error === null ? (
+ this.props.children
+ ) : (
+
+ );
+ }
+ }
+
+ ReactTestRenderer.create(
+
+
+
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(1);
+
+ // Callbacks bubble (reverse order).
+ let [mountCall] = callback.mock.calls;
+
+ // The initial mount includes the ErrorBoundary's error state,
+ // But i also spends "actual" time rendering UI that fails and isn't included.
+ expect(mountCall[1]).toBe('mount');
+ // "actual" time includes: 2 (ErrorBoundary) + 5 (AdvanceTime) + 10 (ThrowsError)
+ // Then the re-render: 2 (ErrorBoundary) + 20 (AdvanceTime)
+ // If replayFailedUnitOfWorkWithInvokeGuardedCallback is enbaled, ThrowsError is replayed.
+ expect(mountCall[2]).toBe(flagEnabled && __DEV__ ? 49 : 39);
+ // "base" time includes: 2 (ErrorBoundary) + 20 (AdvanceTime)
+ expect(mountCall[3]).toBe(22);
+ });
+ });
+ });
+ });
+
+ it('reflects the most recently rendered id value', () => {
+ const callback = jest.fn();
+
+ const renderer = ReactTestRenderer.create(
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(1);
+
+ renderer.update(
+
+
+ ,
+ );
+
+ expect(callback).toHaveBeenCalledTimes(2);
+
+ const [mountCall, updateCall] = callback.mock.calls;
+
+ expect(mountCall[0]).toBe('one');
+ expect(mountCall[1]).toBe('mount');
+ expect(mountCall[2]).toBe(2); // "actual" time
+ expect(mountCall[3]).toBe(2); // "base" time
+
+ expect(updateCall[0]).toBe('two');
+ expect(updateCall[1]).toBe('update');
+ expect(updateCall[2]).toBe(1); // "actual" time
+ expect(updateCall[3]).toBe(1); // "base" time
+ });
+ });
+});
diff --git a/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap b/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap
new file mode 100644
index 00000000000..0022e5abd34
--- /dev/null
+++ b/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer disabled should render children 1`] = `
+
+
+ outside span
+
+
+ inside span
+
+
+ functional component
+
+
+`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer disabled should support an empty Profiler (with no children) 1`] = `null`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer disabled should support an empty Profiler (with no children) 2`] = ``;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer disabled should support nested Profilers 1`] = `
+Array [
+
+ outer functional component
+
,
+
+ inner class component
+ ,
+
+ inner span
+ ,
+]
+`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer enabled should render children 1`] = `
+
+
+ outside span
+
+
+ inside span
+
+
+ functional component
+
+
+`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer enabled should support an empty Profiler (with no children) 1`] = `null`;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer enabled should support an empty Profiler (with no children) 2`] = ``;
+
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer enabled should support nested Profilers 1`] = `
+Array [
+
+ outer functional component
+
,
+
+ inner class component
+ ,
+
+ inner span
+ ,
+]
+`;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 955668d13e4..614a1b6cc7e 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -37,6 +37,9 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
// Warn about deprecated, async-unsafe lifecycles; relates to RFC #6:
export const warnAboutDeprecatedLifecycles = false;
+// Gather advanced timing metrics for Profiler subtrees.
+export const enableProfilerTimer = false;
+
// Only used in www builds.
export function addUserTimingListener() {
invariant(false, 'Not implemented.');
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 12e0fdddad9..672e51de8ee 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -27,6 +27,9 @@ export const REACT_FRAGMENT_TYPE = hasSymbol
export const REACT_STRICT_MODE_TYPE = hasSymbol
? Symbol.for('react.strict_mode')
: 0xeacc;
+export const REACT_PROFILER_TYPE = hasSymbol
+ ? Symbol.for('react.profile_root')
+ : 0xeacc;
export const REACT_PROVIDER_TYPE = hasSymbol
? Symbol.for('react.provider')
: 0xeacd;
diff --git a/packages/shared/ReactTypeOfWork.js b/packages/shared/ReactTypeOfWork.js
index 573b75aabc0..1c672bb4b55 100644
--- a/packages/shared/ReactTypeOfWork.js
+++ b/packages/shared/ReactTypeOfWork.js
@@ -22,7 +22,8 @@ export type TypeOfWork =
| 11
| 12
| 13
- | 14;
+ | 14
+ | 15;
export const IndeterminateComponent = 0; // Before we know whether it is functional or class
export const FunctionalComponent = 1;
@@ -39,3 +40,4 @@ export const Mode = 11;
export const ContextConsumer = 12;
export const ContextProvider = 13;
export const ForwardRef = 14;
+export const Profiler = 15;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js
index e2fd4379995..7eb809c952e 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js
@@ -18,6 +18,7 @@ export const enableUserTimingAPI = __DEV__;
export const enableGetDerivedStateFromCatch = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
+export const enableProfilerTimer = __DEV__;
// React Fabric uses persistent reconciler.
export const enableMutatingReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js b/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js
index c6a4862d85f..c6b30c6532f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js
@@ -18,6 +18,7 @@ export const enableUserTimingAPI = __DEV__;
export const enableGetDerivedStateFromCatch = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
+export const enableProfilerTimer = false;
// React Fabric uses persistent reconciler.
export const enableMutatingReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 3026a69fc6c..51e2133a677 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -19,6 +19,7 @@ export const {
debugRenderPhaseSideEffectsForStrictMode,
warnAboutDeprecatedLifecycles,
replayFailedUnitOfWorkWithInvokeGuardedCallback,
+ enableProfilerTimer,
} = require('ReactFeatureFlags');
// The rest of the flags are static for better dead code elimination.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a238ca16885..5e03310dc08 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -21,6 +21,7 @@ export const enablePersistentReconciler = false;
export const enableUserTimingAPI = __DEV__;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
export const warnAboutDeprecatedLifecycles = false;
+export const enableProfilerTimer = false;
// Only used in www builds.
export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index 57d7c6bf531..780c62db4da 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -18,6 +18,7 @@ export const enableUserTimingAPI = __DEV__;
export const enableGetDerivedStateFromCatch = false;
export const warnAboutDeprecatedLifecycles = false;
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
+export const enableProfilerTimer = false;
// react-reconciler/persistent entry point
// uses a persistent reconciler.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 000f950a4f7..486aecfa68c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -21,6 +21,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
export const enableMutatingReconciler = true;
export const enableNoopReconciler = false;
export const enablePersistentReconciler = false;
+export const enableProfilerTimer = false;
// Only used in www builds.
export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index df3560c6fba..523e1604a65 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -17,6 +17,7 @@ export const {
enableGetDerivedStateFromCatch,
replayFailedUnitOfWorkWithInvokeGuardedCallback,
warnAboutDeprecatedLifecycles,
+ enableProfilerTimer,
} = require('ReactFeatureFlags');
// The rest of the flags are static for better dead code elimination.
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index 23e10d1a73a..ed448d81520 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -10,11 +10,14 @@
import type {Fiber} from 'react-reconciler/src/ReactFiber';
import {
+ REACT_ASYNC_MODE_TYPE,
REACT_CALL_TYPE,
+ REACT_FORWARD_REF_TYPE,
REACT_FRAGMENT_TYPE,
REACT_RETURN_TYPE,
REACT_PORTAL_TYPE,
- REACT_FORWARD_REF_TYPE,
+ REACT_PROFILER_TYPE,
+ REACT_STRICT_MODE_TYPE,
} from 'shared/ReactSymbols';
function getComponentName(fiber: Fiber): string | null {
@@ -26,14 +29,20 @@ function getComponentName(fiber: Fiber): string | null {
return type;
}
switch (type) {
+ case REACT_ASYNC_MODE_TYPE:
+ return 'AsyncMode';
+ case REACT_CALL_TYPE:
+ return 'ReactCall';
case REACT_FRAGMENT_TYPE:
return 'ReactFragment';
case REACT_PORTAL_TYPE:
return 'ReactPortal';
- case REACT_CALL_TYPE:
- return 'ReactCall';
+ case REACT_PROFILER_TYPE:
+ return `Profiler(${fiber.pendingProps.id})`;
case REACT_RETURN_TYPE:
return 'ReactReturn';
+ case REACT_STRICT_MODE_TYPE:
+ return 'StrictMode';
}
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 7a333c8c11a..c9a759d5026 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -8,12 +8,13 @@
*/
import {
- REACT_FRAGMENT_TYPE,
REACT_ASYNC_MODE_TYPE,
- REACT_STRICT_MODE_TYPE,
- REACT_PROVIDER_TYPE,
REACT_CONTEXT_TYPE,
REACT_FORWARD_REF_TYPE,
+ REACT_FRAGMENT_TYPE,
+ REACT_PROFILER_TYPE,
+ REACT_PROVIDER_TYPE,
+ REACT_STRICT_MODE_TYPE,
} from 'shared/ReactSymbols';
export default function isValidElementType(type: mixed) {
@@ -23,6 +24,7 @@ export default function isValidElementType(type: mixed) {
// Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
type === REACT_FRAGMENT_TYPE ||
type === REACT_ASYNC_MODE_TYPE ||
+ type === REACT_PROFILER_TYPE ||
type === REACT_STRICT_MODE_TYPE ||
(typeof type === 'object' &&
type !== null &&