Performance and Profiling

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

---

Chrome Performance FlameGraphs