Menu
I have complex views with lots of components. I would like to optimise performance, I suspect that some parts of the application are being re-rendered for no reason, but I cannot see visually which ones are the problem. Is there a tool that will show me visually which parts of the screen re-rendered on state change as I'm using the app?
819
React DevTools lets you highlight renders under Components -> View Settings -> Highlight updates when components render. This will show you the virtual renders. If you want to see native re-renders, you can do so in the Chrome DevTools, under the three-dot menu on the right -> More tools -> Rendering -> Paint flashing.
Identify wasted renders The simplest method is to toggle on the highlight updates option in the React dev tools preference. While interacting with the app, updates are highlighted on the screen with colored borders. By this process, you should see components that have re-rendered.
The simplest way to check how many times React components render is by using the “Highlight updates when components render” option in React DevTools.
Improving re-renders performance with useMemo/useCallbackMemoizing props by themselves will not prevent re-renders of a child component. If a parent component re-renders, it will trigger re-render of a child component regardless of its props.
I found it finally, https://github.com/redsunsoft/react-render-visualizer. Also there is another tool, https://github.com/garbles/why-did-you-update, but it just logs to the console the components that rerendered and they shouldn't have. But still, a useful tool.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
