@samitouri / QOS-React / commits / 9dcc60af33

Delete logTopLevelRenders flag and console timing (#9825)

This was mostly used for timing of initial mounts. However, we haven't implemented that in Fiber and yet nobody has complained despite running without it. Further more the update tracks any update within the tree, not just updates to the props of the top level. This is much less useful due to the variation. I could make this track initial mounts too but it's a bit awkward so I'd rather just delete it if possible. We can run the full profiling mode if we want more coverage.

Sebastian Markbåge committed Jun 1, 2017 at 13:00 UTC 9dcc60af3394f5e5f92a7cc9d54a68ce48795681

8 files changed -121

scripts/fiber/tests-failing.txt

-3

@@ -9,6 +9,3 @@ src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js

9 * can reconcile text merged by Node.normalize()

10 * can reconcile text arbitrarily split into multiple nodes

11 * can reconcile text arbitrarily split into multiple nodes on some substitutions only

12 -

13 -src/renderers/dom/shared/__tests__/ReactMount-test.js

14 -* marks top-level mounts

scripts/fiber/tests-passing.txt

-1

@@ -583,7 +583,6 @@ src/renderers/__tests__/ReactUpdates-test.js

583 * should queue updates from during mount

584 * calls componentWillReceiveProps setState callback properly

585 * does not call render after a component as been deleted

586 -* marks top-level updates

586 * throws in setState if the update callback is not a function

587 * throws in forceUpdate if the update callback is not a function

588 * does not update one component twice in a batch (#2410)

src/renderers/__tests__/ReactUpdates-test.js

-34

@@ -825,40 +825,6 @@ describe('ReactUpdates', () => {

825 expect(renderCount).toBe(1);

826 });

827

828 - it('marks top-level updates', () => {

829 - var ReactFeatureFlags = require('ReactFeatureFlags');

830 -

831 - class Foo extends React.Component {

832 - render() {

833 - return <Bar />;

834 - }

835 - }

836 -

837 - class Bar extends React.Component {

838 - render() {

839 - return <div />;

840 - }

841 - }

842 -

843 - var container = document.createElement('div');

844 - ReactDOM.render(<Foo />, container);

845 -

846 - try {

847 - ReactFeatureFlags.logTopLevelRenders = true;

848 - spyOn(console, 'time');

849 - spyOn(console, 'timeEnd');

850 -

851 - ReactDOM.render(<Foo />, container);

852 -

853 - expect(console.time.calls.count()).toBe(1);

854 - expect(console.time.calls.argsFor(0)[0]).toBe('React update: Foo');

855 - expect(console.timeEnd.calls.count()).toBe(1);

856 - expect(console.timeEnd.calls.argsFor(0)[0]).toBe('React update: Foo');

857 - } finally {

858 - ReactFeatureFlags.logTopLevelRenders = false;

859 - }

860 - });

861 -

828 it('throws in setState if the update callback is not a function', () => {

829 spyOn(console, 'error');

830

src/renderers/dom/shared/__tests__/ReactMount-test.js

-31

@@ -310,35 +310,4 @@ describe('ReactMount', () => {

310

311 expect(calls).toBe(5);

312 });

313 -

314 - it('marks top-level mounts', () => {

315 - var ReactFeatureFlags = require('ReactFeatureFlags');

316 -

317 - class Foo extends React.Component {

318 - render() {

319 - return <Bar />;

320 - }

321 - }

322 -

323 - class Bar extends React.Component {

324 - render() {

325 - return <div />;

326 - }

327 - }

328 -

329 - try {

330 - ReactFeatureFlags.logTopLevelRenders = true;

331 - spyOn(console, 'time');

332 - spyOn(console, 'timeEnd');

333 -

334 - ReactTestUtils.renderIntoDocument(<Foo />);

335 -

336 - expect(console.time.calls.count()).toBe(1);

337 - expect(console.time.calls.argsFor(0)[0]).toBe('React mount: Foo');

338 - expect(console.timeEnd.calls.count()).toBe(1);

339 - expect(console.timeEnd.calls.argsFor(0)[0]).toBe('React mount: Foo');

340 - } finally {

341 - ReactFeatureFlags.logTopLevelRenders = false;

342 - }

343 - });

313 });

src/renderers/dom/stack/client/ReactMount.js

-15

@@ -17,7 +17,6 @@ var React = require('react');

17 var ReactDOMComponentTree = require('ReactDOMComponentTree');

18 var ReactDOMContainerInfo = require('ReactDOMContainerInfo');

19 var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');

20 -var ReactFeatureFlags = require('ReactFeatureFlags');

20 var ReactInstanceMap = require('ReactInstanceMap');

21 var ReactInstrumentation = require('ReactInstrumentation');

22 var ReactMarkupChecksum = require('ReactMarkupChecksum');

@@ -99,16 +98,6 @@ function mountComponentIntoNode(

98 shouldReuseMarkup,

99 context,

100 ) {

102 - var markerName;

103 - if (ReactFeatureFlags.logTopLevelRenders) {

104 - var wrappedElement = wrapperInstance._currentElement.props.child;

105 - var type = wrappedElement.type;

106 - markerName =

107 - 'React mount: ' +

108 - (typeof type === 'string' ? type : type.displayName || type.name);

109 - console.time(markerName);

110 - }

111 -

101 var markup = ReactReconciler.mountComponent(

102 wrapperInstance,

103 transaction,

@@ -118,10 +107,6 @@ function mountComponentIntoNode(

107 0 /* parentDebugID */,

108 );

109

121 - if (markerName) {

122 - console.timeEnd(markerName);

123 - }

124 -

110 wrapperInstance._renderedComponent._topLevelWrapper = wrapperInstance;

111 ReactMount._mountImageIntoNode(

112 markup,

src/renderers/shared/fiber/ReactFiberScheduler.js

-17

@@ -45,7 +45,6 @@ var ReactFiberCompleteWork = require('ReactFiberCompleteWork');

45 var ReactFiberCommitWork = require('ReactFiberCommitWork');

46 var ReactFiberHostContext = require('ReactFiberHostContext');

47 var ReactFiberHydrationContext = require('ReactFiberHydrationContext');

48 -var ReactFeatureFlags = require('ReactFeatureFlags');

48 var {ReactCurrentOwner} = require('ReactGlobalSharedState');

49 var getComponentName = require('getComponentName');

@@ -793,18 +792,6 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(

792 nextUnitOfWork = findNextUnitOfWork();

793 }

794

796 - let hostRootTimeMarker;

797 - if (

798 - ReactFeatureFlags.logTopLevelRenders &&

799 - nextUnitOfWork !== null &&

800 - nextUnitOfWork.tag === HostRoot &&

801 - nextUnitOfWork.child !== null

802 - ) {

803 - const componentName = getComponentName(nextUnitOfWork.child) || '';

804 - hostRootTimeMarker = 'React update: ' + componentName;

805 - console.time(hostRootTimeMarker);

806 - }

807 -

795 // If there's a deadline, and we're not performing Task work, perform work

796 // using this loop that checks the deadline on every iteration.

797 if (deadline !== null && priorityLevel > TaskPriority) {

@@ -851,10 +838,6 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(

838 }

839 }

840 }

854 -

855 - if (hostRootTimeMarker) {

856 - console.timeEnd(hostRootTimeMarker);

857 - }

841 }

842

843 function performWork(

src/renderers/shared/stack/reconciler/ReactUpdates.js

-16

@@ -12,7 +12,6 @@

12 'use strict';

14 var PooledClass = require('PooledClass');

15 -var ReactFeatureFlags = require('ReactFeatureFlags');

15 var ReactReconciler = require('ReactReconciler');

16 var Transaction = require('Transaction');

@@ -131,26 +130,11 @@ function runBatchedUpdates(transaction) {

130 // that performUpdateIfNecessary is a noop.

131 var component = dirtyComponents[i];

132

134 - var markerName;

135 - if (ReactFeatureFlags.logTopLevelRenders) {

136 - var namedComponent = component;

137 - // Duck type TopLevelWrapper. This is probably always true.

138 - if (component._currentElement.type.isReactTopLevelWrapper) {

139 - namedComponent = component._renderedComponent;

140 - }

141 - markerName = 'React update: ' + namedComponent.getName();

142 - console.time(markerName);

143 - }

144 -

133 ReactReconciler.performUpdateIfNecessary(

134 component,

135 transaction.reconcileTransaction,

136 updateBatchNumber,

137 );

150 -

151 - if (markerName) {

152 - console.timeEnd(markerName);

153 - }

138 }

139 }

140

src/renderers/shared/utils/ReactFeatureFlags.js

-4

@@ -13,10 +13,6 @@

13 'use strict';

15 var ReactFeatureFlags = {

16 - // When true, call console.time() before and .timeEnd() after each top-level

17 - // render (both initial renders and updates). Useful when looking at prod-mode

18 - // timeline profiles in Chrome, for example.

19 - logTopLevelRenders: false,

16 prepareNewChildrenBeforeUnmountInStack: true,

17 disableNewFiberFeatures: false,

18 enableAsyncSubtreeAPI: false,