How to track React re-renders - why-did-you-render issues

alexandre-emmanuel — Wed, 18 Sep 2024 12:06:05 +0000

I have written some parts of ERP-type React 18.2 web app that uses Redux, RTK, Material-UI, AgGrid. It has heavy forms (e.g. invoice form with header, invoice-lines, tax-lines and complex recaclulation logic). One of the important feature of my app is to allow multi-tab interface. There are several applications that allow to open several in-app forms at once - each within its own tab. Axelor ERP https://demo.axelor.com/open-suite-en/ is one example. I am using https://mui.com/material-ui/react-tabs/ dynamically.

All that is very nice. But performace issues spring up, especially when multiple in-app tabs are being opened. And performance issues are, of course, due to rerender.

It is very strange, that https://react.dev/ has very few information about importance of re-rendering optimization as this failure can kill whole projects.

Several books address re-rendering optimization. The best ones are these two. https://www.manning.com/books/react-in-depth has extensive and practical Ch.3 and this book/blog https://www.developerway.com/tags/re-renders has even multiple chapters.

But the strange thing is that these books and articles are excellent about techniques how to improve the optimization, but they almost nothing about the tools to monitor the re-renders and track down the causes and data changes of re-renders.

React Developer Tools Profiler/Flamegraph is good in reporting the whole rerenders and giving short information 'Why did this render?' and 'Rendered at'. But that is not sufficient. Especially if one compares this with the legendary why-did-you-render.

And now the confusions starts. https://www.npmjs.com/package/@welldone-software/why-did-you-render seems to be the best tool imaginable for tracking the causes of re-render. Indispensable tool. It reports 400k weekly downloads.

Yet - its codesanbox examples target React 16. I tried to upgrade its codesandbox examples to React 18. They run as React applications, but no wdyr concole reports are generated. There are some issues that reports this problem, e.g. https://github.com/welldone-software/why-did-you-render/issues/294 but generally the activity is almost nonexistant. Stackoveflow threads has only severl questions about wdyr.

So - what are the best practices to track down and debug excessive re-renders in React 18 and React 19 and is why-did-you-render the right tool even today or are there any alternatives? Even Google is almost silent about all of this.

p.s. I managed to get some log entries from wdyr, but I am not sure what components get reported and which ones - not. As I am developing React 18 (and looking forward to React 19), my components are exclusively functional. wdyr was developed in times when class component was the almost the only option.

DEV Community: alexandre-emmanuel

How to track React re-renders - why-did-you-render issues