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:

1. Open react application
2. Open react-devtools
3. Check option “Highlight updates when components render” in react-devtools settings
4. Change the internal state of a component
5. 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

[Faelivrinx]

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.

[M-Izadmehr]

@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.