react: Bug: Excessive cpu usage of the page when react-devtools is active

When option “Highlight updates when components render” is activated the whole page repaints in rapid succession after the components state has been changed. It causes 100% CPU usage by the browser and unpleasant DX due low fps.

React version: 16.12.0 DevTools version 4.4.0-f749045a5

The sequance of actions is important:

Open react application
Open react-devtools
Check option “Highlight updates when components render” in react-devtools settings
Change the internal state of a component
In activity monitor there will be 100% cpu usage of the page, or check option “Paint flashing” in rendering pane of chrome devtools

The code example (to trigger the issue: 1) check the option “Highlight updates when components render” and 2) click on the button:

import React, {useState} from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      click #{count}
    </button>
  );
}

export default App;

The current behavior

Excessive cpu usage of the page

The expected behavior

Normal cpu usage of the page

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 16 (5 by maintainers)

Most upvoted comments

Oh wow. So essentially setTimeout with MAX_VALUE kind of just overflows?

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days), resulting in the timeout being executed immediately. source

I think what the code should do is not call setTimeout when it is still Number.MAX_VALUE because it means we don’t have anything to draw. Or refactor this differently somehow.

Oh, I see. I’ll try to refactor it a little bit but without engaging to refactor other functions. Maybe just reversed conditions will be more readable in this situation.

Faelivrinx on Apr 5, 2020

@mkrl Interesting, I cloned your repository it worked fine for me too, it might be a chrome bug on ubuntu, can you also check it with firefox devtools (it is basically the same code base just built for firefox), if it exists there too it means that it is probably related to react-devtools.

M-Izadmehr on Feb 7, 2020

Oh wow. So essentially setTimeout with MAX_VALUE kind of just overflows?

could you explain what’s the point of refreshing so often? It could be replaced by some const value (e.g 50 ms which will allow redraw canvas 20 times per second)?

I think it’s just a buggy condition. The idea is that earliest expiration would get overwritten here.

I think what the code should do is not call setTimeout when it is still Number.MAX_VALUE because it means we don’t have anything to draw. Or refactor this differently somehow.

gaearon on Apr 5, 2020

@M-Izadmehr just checked, I was able to achieve a similar behavior in Firefox 72.0. Firefox paint flashing doesn’t indicate the entire page being updated in a way Chrome dev tools did, however the CPU usage did skyrocket to 100%.

mkrl on Feb 7, 2020

I can confirm it’s reproducible, running Chrome 80.0.3987.87, React Dev Tools 4.4.0 & React 16.12.0 on Debian Linux, bundled with Parcel. Also happened to my coworker while building our Storybook with Webpack on Mac.

Here’s a bare reproduce minimum that consistently worked across several machines. https://github.com/mkrl/react-devtools-17935

mkrl on Feb 7, 2020

@myshov I tried to replicate this issue, however it worked perfectly fine in both chrome/firefox devtools, on Mac laptop.

M-Izadmehr on Feb 3, 2020