Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Call Perf method in setState callback #3436

Closed
koba04 opened this issue Mar 17, 2015 · 1 comment
Closed

Call Perf method in setState callback #3436

koba04 opened this issue Mar 17, 2015 · 1 comment

Comments

@koba04
Copy link
Contributor

koba04 commented Mar 17, 2015

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.

@koba04
Copy link
Contributor Author

koba04 commented Oct 24, 2016

This Issue is outdated, so I'll close this.

@koba04 koba04 closed this as completed Oct 24, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant