We recently discussed React Native Performance and how to improve the performance of your React Native apps. Keeping your application performant isn’t a sprint, it’s a marathon. You need to constantly monitor the performance of your app and make sure new features and fixes are not introducing any performance regressions.
In this article, we will discuss some of the tools and techniques that can help you measure and monitor the performance of your React Native apps. These tools can help you identify the bottlenecks in your app and understand the root causes of performance issues.
React Native Profiler & Performance Monitor
React Native comes with built in tools to help you measure and monitor the performance of your app. These tools can be used to get a detailed view of the performance of your app and identify the bottlenecks. These tools are:
These tools allow you to get detailed information about work done on JS threads, UI threads, Native Modules and Render threads in real time. This allows you to identify performance bottlenecks in any part or interaction in your app. By using it alongside React Native Performance Monitor you can get a detailed breakdown of the performance of your app.
With React Native Profiler gives you following metrics:
- JS Thread – this metric measures the time taken by a JS thread to execute the code.
- UI Thread – this metric calculates the time taken to measure/layout/draw the UI.
- Native Modules – this metric calculates the time taken by the native modules to execute the platform-specific code.
- Render Thread – this metric calculates the time taken by the actual OpenGL commands used to draw your UI.
Combined with stats given by RN Performance Monitor, i.e. FPS, FPS Drops, Frame Time, you can get a detailed view into the performance of your app and the root causes of performance issues. It can be super helpful in identifying bottlenecks to optimize your app.
💡 Gives real time monitoring without any extra setup.
⛔ Not suitable for continuous monitoring or CI/CD.
Shopify RN Performance Profiler Suite
Shopify has been investing heavily in React Native and has been contributing to the community in many ways. One of the most notable contributions is their React Native Performance Profiler Suite. It’s a set of tools that can help you measure and monitor the performance of your React Native apps.
The suite consists of react-native-performance, a core library for measuring the render times for the different flows in your app. This core is coupled with specific libraries for measuring navigation and list performance. These libraries are:
- react-native-navigation-performance: a tool for measuring the performance of navigation in your app.
- react-native-performance-lists-profiler: a library for measuring the performance of lists in your app.
- Flipper plugin: a plugin designed to make lists profiling easier. The plugin visualizes TTI, blank areas, and its averages.
The library heavily focuses on render and interactivity times and gives you a detailed breakdown of the performance of how screens and lists are rendered. Being a client side library, metrics can be stored locally and can be sent to any telemetry service of your choice. This also allows for post release monitoring of your app and avoids vendor lock-in.
💡 Open to see logs in realtime and via any telemetry service. ⛔ Requires some setup to integrate with a telemetry service.
Firebase Performance Monitoring
Firebase along with other services also offers a Performance Monitoring service. It’s a client side library that can be integrated with your React Native app to measure the following:
- Startup time of your app
- Screen rendering time
- HTTP/S network requests
- Custom traces and triggers
The traces and metrics are sent to the Firebase console and can be viewed in real time. If coupled with Firebase Crashlytics, you can get a detailed view of the performance of your app and the root causes of performance issues. The in-depth reporting provided by Firebase console makes it a great choice for monitoring the performance of your app post release; without diving into the hassle of setting up a telemetry service.
💡 Easy setup with wide range of features, and does not require a telemetry service.
⛔ No real time monitoring during the development phase.
LogRocket
LogRocket is a frontend monitoring tool that combines session replay, error tracking, and product analytics all in one place. Coupled with an amazing set of integration tools, it can be helpful for monitoring the performance and reporting issues to relevant teams. Simple SDK integration from the client side and an easy-to-use dashboard makes it a great choice for performance monitoring.
Session recording and in-depth integration with libraries like Redux, React Navigation, React Query, etc. makes it a great choice specifically for React Native apps. It has a wide range of features including machine learning-based insights, which can help you identify the most impactful performance issues in your app.
LogRocket has both SaaS and on-premises solutions to fit your needs.
💡 Wide range of features and great integration with libraries.
⛔ No real time monitoring in dev mode.
Sentry
Sentry is one of the most popular frontend monitoring tools. It enables automatic native crash detection as soon as you integrate, along with offline caching of events. It also monitors performance of navigation, gestures and HTTP/S requests. Initial integration is simple and can be done with a single line of code; also the library offers an API to collect custom events, metrics and traces.
Sentry also offers the ability to collect user feedback when an error occurs. It couples the crash reports with view hierarchy and logs to help you identify the root cause of a given issue. It also offers a wide range of integrations with other tools and services to help you report issues to relevant teams.
💡 Full stack monitoring with a wide range of features.
⛔ Might be too much information at times.
Parting words
In this article, we discussed some of the tools and techniques that can help you measure and monitor the performance of your React Native apps. These tools can help you identify the bottlenecks in your app and understand the root causes of performance issues. Integrating these tools in your CI/CD pipeline can help you catch performance regressions early and fix them before they affect your users.
If you have any other tools that you use to measure and monitor the performance of your React Native apps, please let us know in the comments below.
