Exposing React Performance Tools in the Browser Console

The React docs on Performance Tools is quite lacking as to how it should be used, so I had to do some digging around to figure out how it worked.

It turns out Perf.start() doesn’t work in component lifecycles1, raising an ugly internal error that hasn’t been properly dealt with yet (see this issue for more details).

This prevents us from doing some things like:

Calling Perf and measuring performance repeatedly.

Using Perf to measure between arbitrary points in deeper parts of your component hierarchy.

I solved these problems by exposing React’s performance tools in the browser. There are a few ways to do this. If you’re using webpack, you can use expose-loader, which allows us to attach modules to the global object: