Overview

Profiling the app and measuring changes is a key part in optimising performance. When making changes and building out features it's important to measure app performance, especially when those changes are intended to improve it.

This section will cover React DevTools, which is the primary means of analysing performance in React apps, and therefore our React Native app.

It will also go over some native methods of profiling for when an issue is harder to find, or is related to something other than what is happening in the JS thread.

The overwhelming majority of time spent measuring, monitoring, and profiling performance should be done in React DevTools and the perf monitor. Because most performance issues are caused by JS, these tools will be your go to when trying to hunt down and resolve performance issues. It's important that RN developers are comfortable using at least the React DevTools and perf monitor, because they should be a staple in the development process.

When to profile your changes

It's better to profile too often than not enough. This means that any time you make changes to the app that modify logic, the flow of a component, or basically anything that isn't updating text or minor styles, you should take the time to profile your changes and ensure no perf regression has been introduced. Doing this will also mean issues are caught early, and not by QA or worse - users complaining the app is slow.

Once comfortable with the tools in this section you will be able to run a basic performance profile in only a few minutes, and make it as much a part of your workflow as testing the app on a simulator or using git.