React-devtools: Poor Performance in Chrome

Created on 8 Aug 2015  路  8Comments  路  Source: facebook/react-devtools

It appears that after opening react-devtools, react-devtools itself becomes the most significant, negative influence on rendering performance:

image

In this case, react-devtools is blocking on the UI thread for 157ms which makes a very perceptible dent in the app's frames per second:

image

Even with the react-devtools tab closed there appears to be no way to stop this from happening without closing Chrome devtools entirely, thus losing any other state one has currently configured in devtools.

Perhaps a solution would be to stop collecting data while react-devtools tab is not focussed, or provide a means to disconnect this聽polling mechanism without restarting Chrome devtools entirely.

bug

Most helpful comment

All 8 comments

Yeah. There is some redundancy in the data we send over - so we can probably streamline things a bit.
Not sure about what we want to do about "stop collecting data"

actually, I can think of a way to pause the sending of data. I'll investigate that.

When I open up the React tab in chromes dev-tools chrome becomes incredibly slow, almost unresponsive. Even trying to close the dev-tools might take a few seconds, but as soon as the dev-tools closes the speed/responsiveness goes back to normal.

If I look in Chrome task-manager I can see that the tab where React dev-tools are open increase in memory usage by the second, going up from ~200MB to before switching to the React-tab in the dev-tools and within a minute of switching increasing to 900+ and the it starts going back and forth between 500-ish to 900-ish.

Using Chome version 45.0.2454.85 m and React dev-tools version 0.14, still using React 0.12 though. But a friend with same version of chrome, React dev-tools and the same site does not have the same perf-issues..

Having the same issue with Version 46.0.2490.80 (64-bit) React devtools 0.14.4

Having the same issue here Version 51.0.2704.84 (64-bit) React devtools 0.14.11

146 made it significantly better. I also made some changes later to address this.

For now the workaround is to close DevTools (or switch to another tab) if it makes the app slow.

App works fine, but if I open performance tab from react dev tools all site froze, and CPU usage jump over 100%.

MacOS 10.13.6

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zhammer picture zhammer  路  4Comments

jerikson picture jerikson  路  4Comments

prasannavl picture prasannavl  路  3Comments

BrandonWade picture BrandonWade  路  4Comments

txiaocao picture txiaocao  路  5Comments