Shopify React Native Performance

React Native Performance is a suite of profiling tools developed by Shopify to measure and analyze React Native application performance. The ecosystem is organized into a core library and several specialized extension libraries designed for specific navigation and list components.

Core Library

• react-native-performance: The foundational library used to measure render times across various application flows.

Extension Libraries

• react-native-performance-navigation: Provides higher-order profiles and components specifically for apps using React Navigation.
  • react-native-performance-navigation-bottom-tabs: Adds helper methods for @react-navigation/bottom-tabs.
  • react-native-performance-navigation-drawer: Adds helper methods for @react-navigation/drawer.
• react-native-performance-lists-profiler: Contains utilities specifically for profiling FlatList and FlashList.
• flipper-plugin-react-native-performance: A Flipper plugin that visualizes list profiling metrics such as Time to Interactive (TTI), blank areas, and their averages.

To get the most accurate performance reports, you should notify the profiling library of a navigation request as close to the native touch event as possible.

The Recommended Method: When using the useStartProfiler hook, pass the GestureResponderEvent object (the first argument of a standard Touchable.onPress callback) to the profiler. This object contains nativeEvent.timestamp, which allows the library to calculate timing based on the actual native touch rather than the delayed JS execution.

Benefits of passing GestureResponderEvent:

1. Accuracy: It effectively uses native-layer timing, bypassing the latency of the React Native bridge and the JS event queue.
2. Bridge Insights: The library can compute timeToConsumeTouchEvent in the RenderPassReports, helping you debug how busy the native-to-JS communication channel is.

Why not use React Navigation events? Observing react-navigation events (like onStateChange) introduces significant inaccuracies because there is measurable latency between calling navigation.navigate() and the event being emitted. Furthermore, these events do not carry the GestureResponderEvent metadata required to reconstruct the native touch timestamp.

Pro-tip: Use the useProfiledNavigation hook from the @shopify/react-native-performance-navigation package to simplify this process.

// Example of high-accuracy profiling trigger
const onPress = (event: GestureResponderEvent) => {
  // 1. Notify the profiler with the event to capture native timestamp
  startProfiler(event);
  
  // 2. Perform the actual navigation
  navigation.navigate('TargetScreen');
};

To measure how long it takes for your app to become interactive on startup, wrap the JSX of your landing screens (e.g., Home, Login, or Welcome screens) with the PerformanceMeasureView component.

Key Concepts:

• Automatic Start: The timer starts automatically during the initial native app startup (after following the library's initialization steps).
• Automatic Stop: The timer stops when the first PerformanceMeasureView is rendered and its native UI view is fully rendered. The output is a RenderPassReport.
• Handling Render Passes: Most screens have multiple render passes (e.g., a loading state followed by data). Use the interactive prop to tell the library when the screen is actually usable by the user.

Implementation:

Wrap your screen component's return value. Use the interactive prop to signal when the 'final' render has occurred.

const HomeScreen = () => {
    const {data} = useQuery(...)
    const homeItems = data?.homeItems

    return (
        <PerformanceMeasureView interactive={homeItems !== undefined} screenName="HomeScreen">
            {
              homeItems === undefined
                ? <LoadingIndicator /> : <HomeListView items={homeItems}/>
            }
        </PerformanceMeasureView>
    )
}

To measure the time it takes for a screen to re-paint due to a UI event (like pull-to-refresh) without navigating away, use the useResetFlow hook.

Requirements:

1. useResetFlow: Call resetFlow({ destination: 'ScreenName' }) when the event occurs. This restarts the timer on the same screen.
2. componentInstanceId: You must pass the componentInstanceId returned by useResetFlow into the PerformanceMeasureView component so the library can link the restart to the correct view.

Implementation:

const HomeScreen = () => {
  const {resetFlow, componentInstanceId} = useResetFlow();
  const {data, refetch, networkStatus} = useQuery(...)
  const homeItems = data?.homeItems

  const renderStateProps = {
    interactive: data !== undefined,
    renderPassName: data === undefined 
      ? 'loading' 
      : (isNetworkRequestInFlight(networkStatus) ? 'cached_render' : 'network_render')
  }

  return (
    <PerformanceMeasureView 
      componentInstanceId={componentInstanceId} 
      screenName="HomeScreen" 
      {...renderStateProps}
    >
      <FlatList
        onRefresh={() => {
          resetFlow({ destination: 'HomeScreen' })
          refetch()
        }}
      />
    </PerformanceMeasureView>
  )
}

const HomeScreen = () => {
  const {resetFlow, componentInstanceId} = useResetFlow();

  const {data, refetch, networkStatus} = useQuery(...)
  const homeItems = data?.homeItems

  const renderStateProps: RenderStateProps = {
    interactive: data !== undefined,
    renderPassName: data === undefined ? 'loading' : (isNetworkRequestInFlight(networkStatus) ? 'cached_render' : 'network_render')
  }

  return (
    <PerformanceMeasureView componentInstanceId={componentInstanceId} screenName="HomeScreen" {...renderStateProps}>
      <FlatList
        { /* configure your FlatList */ }
        onRefresh={() => {
          resetFlow({
            destination: 'ScreenA'
          })
          refetch()
        }}
      />
    </PerformanceMeasureView>
  )
}