Measuring React Native Rendering Times
Article Summary
Shopify went all-in on React Native, but had one critical question: Is it actually as fast as native? They needed proof, not assumptions.
When Shopify committed to React Native across all mobile apps, they built an open-source performance library to measure what matters: Time To Interactive (TTI). Senior Production Engineer Elvira Burchik explains how they track rendering times end-to-end, including bridge communication delays.
Key Takeaways
- Library measures three scenarios: app startup, navigation, and screen re-renders
- Uses invisible marker views to track actual native rendering, not just React completion
- State machine models multiple render passes before screens become truly interactive
- Integrates with analytics tools like Amplitude in one line of code
- Companion packages available for React Navigation, FlatList, and FlashList profiling
Critical Insight
The @shopify/react-native-performance library gives teams concrete TTI metrics to prove React Native performance matches native apps and catch regressions before users notice.
