Closed
Description
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