Skip to content

Call Perf method in setState callback #3436

Closed
@koba04

Description

@koba04

In many case, I suppose that Perf is used like this.

React.addons.Perf.start();
this.setState({items: newItems},() => {
  React.addons.Perf.stop();
  React.addons.Perf.printInclusive();
});

However, totalTime is printed as Total time: 0.00 ms.
Because setState callback is called before flushBatchedUpdates,
totalTime is computed after that.

sample: http://jsfiddle.net/koba04/9b615edu/

I think that this behavior is a little confusing...

Do you have any ideas?

my ideas

Perf.stop accepts callback

The callback is called after flushBatchedUpdates.

React.addons.Perf.start();
this.setState({items: newItems}, () => {
  React.addons.Perf.stop(() => {
    React.addons.Perf.printInclusive();
  });
});

totalTime is computed at Perf.stop

But totalTime is treated as a diff between Perf.start and Perf.stop.

  • ReactDefaultPerf.js
  start: function() {
    if (!ReactDefaultPerf._injected) {
      ReactPerf.injection.injectMeasure(ReactDefaultPerf.measure);
    }

    ReactDefaultPerf._allMeasurements.length = 0;
    ReactPerf.enableMeasure = true;
    ReactDefaultPerf.startTime = performanceNow();
  },

  stop: function() {
    ReactPerf.enableMeasure = false;
    ReactDefaultPerf._allMeasurements[
      ReactDefaultPerf._allMeasurements.length - 1
    ].totalTime = performanceNow() - ReactDefaultPerf.startTime;
  },

Add some documentation

  • totalTime is computed after flushBatchedUpdates, so you need to call your perf method on the next event loop in case of setState callback.
React.addons.Perf.start();
this.setState({items: newItems},() => {
  React.addons.Perf.stop();
  setTimeout(() => {
    React.addons.Perf.printInclusive();
  }, 0);
});

Thank you.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions