M3 Performance and Profiling - ProjectMirador/mirador GitHub Wiki
This page can be used for team members to document issues/solutions/ways to benchmark questions around performance.
Basic Memory Consumption
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.
Basic Rerendering
You can use the React dev tools to visualize when a component rerenders. Must be on a development build.
Material UI Rerendering and Performance
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.
Why did you render
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