Our Solution for Measuring React Native Rendering Times

After Shopify went all-in on React Native, we had to find a way to confirm our mobile apps are fast. The solution is an open-source @shopify/react-native-performance library, which measures rendering times in React Native apps.

Shopify logo
Shopify
•
Elvira Burchik
•12 min read•beginner•
--
•View Original
JSXReactRender

Overview

The article discusses Shopify's approach to measuring rendering times in React Native applications using an open-source library called @shopify/react-native-performance. It highlights the importance of performance in mobile apps, the metrics that can be measured, and how to implement the library effectively.

What You'll Learn

1

How to measure app startup render time in React Native applications

2

How to implement navigation render time measurement using the @shopify/react-native-performance library

3

Why measuring screen re-render times is crucial for user experience

4

How to integrate performance metrics into analytics tools like Amplitude

Prerequisites & Requirements

  • Basic understanding of React Native development
  • Familiarity with performance monitoring tools(optional)

Key Questions Answered

What metrics can be measured using the @shopify/react-native-performance library?
The library measures app startup render time, navigation render time, and screen re-render time. Each metric tracks the time taken for specific actions, such as when the app starts, when a user navigates between screens, and when a screen updates due to user interaction.
How does the library determine when a screen is rendered and interactive?
The library injects an invisible marker view that reports when the view has moved to the window on the native side. This allows for accurate measurement of the time taken for a screen to become interactive, including the time spent in the React Native to native bridge communication.
How can performance metrics be reported to external analytics tools?
The library provides an onReportPrepared callback that can be used to send performance metrics to analytics tools like Amplitude. This allows developers to visualize performance data and monitor trends over time, helping to identify bottlenecks in the application.
What is the significance of render passes in measuring performance?
Render passes represent the incremental steps a screen goes through before becoming interactive. The library models these steps, allowing developers to understand how long each part of the rendering process takes, which is crucial for optimizing user experience.

Technologies & Tools

Library
@shopify/React-native-performance
Used to measure rendering times in React Native applications.
Analytics Tool
Amplitude
Used for reporting performance metrics and visualizing trends.

Key Actionable Insights

1
Integrate the @shopify/react-native-performance library into your React Native app to gain insights into rendering performance.
By measuring app startup, navigation, and screen re-render times, you can identify performance bottlenecks and improve the overall user experience.
2
Use the onReportPrepared callback to send performance metrics to your analytics tool.
This enables real-time monitoring of performance metrics, allowing you to visualize trends and make data-driven decisions to enhance app performance.
3
Implement navigation render time measurement to ensure smooth transitions between screens.
By tracking how long it takes for screens to become interactive, you can optimize navigation flows and reduce user frustration.

Common Pitfalls

1
Failing to initialize the performance library at the correct point in the app lifecycle can lead to inaccurate measurements.
Ensure that the performance library is initialized as early as possible in the app's lifecycle to capture all relevant performance data.
2
Not wrapping the correct components with PerformanceMeasureView can result in missing performance metrics.
Identify all screens that users can interact with and ensure they are wrapped correctly to capture accurate render times.

Related Concepts

React Native Performance Optimization
Performance Monitoring Tools
User Experience Design