M3 Performance and Profiling
This page can be used for team members to document issues/solutions/ways to benchmark questions around performance.
Basic memory consumption and garbage collection can be viewed in the Chrome DevTools Memory tab.
Doing this on a production build will help keep memory consumption profiles consistent. Just watching the memory consumption can be helpful in basic diagnose of an issue.
You can use the React dev tools to visualize when a component rerenders. Must be on a development build.
This issue https://github.com/mui-org/material-ui/issues/10778 documents extensively issues reported to Material - UI, suggestions, and benchmarking approaches for solving performance issues. Recommended reading.
Another helpful tool is the package @welldone-software/why-did-you-render. You can install quickly by cherry-picking 37703ca commit on top of your work and then uncommenting this line to include all the components: https://github.com/ProjectMirador/mirador/compare/why-did?expand=1#diff-1fdf421c05c1140f6d71444ea2b27638R12
You can then use the Chrome console message counter to see how many "rerenders" and why.
Useful blog post explaining: https://medium.com/welldone-software/why-did-you-render-mr-big-pure-react-component-part-2-common-fixing-scenarios-667bfdec2e0f