Performance Check with Profiler

Recently we have added the Profiler component to the main body of the application, which will measure renders as they occur on the page with a number of metrics.

This wiki outlines how we can use that as part of our evaluation process when making significant changes to the architecture of the application.

// TODO: Finish this wiki

Profiling with Chrome

The first step of investigating a change is to take a look at it in the Chrome profiler. The usefulness of this and how it is used in practice are highlighted on the performance wiki page.

Using the React profiler in Chrome can give you a good understanding of what is happening and is a good way to spot any red flags which suggest things might not be working as well as you thought they worked.

Profiling with Profiler

The main application page now uses the React Profiler component to produce useful output about how long renders took. The application of this tool and its useful output in the console has made it much easier to measure changes, as this process was quite involved using the Chrome profiler before.

Profiling the Production Build