WhoBuilt

Top 5 metrics when you need to track when optimizing React Native app

Apr 11, 2023· 1 h 9 min· 1.2K views·Watch on YouTube

Speakers

Michał, Callstack’s Head of Technology, explains how to measure React Native performance with host Mukesh and business development manager Jakub during a Callstack webinar.

Why performance metrics matter

The webinar focuses on five metrics: frames per second, time to interactive, app size, CPU use, and memory use. The presenters argue that slow loading and large downloads can drive users away, especially when connectivity or device storage is limited.

Track frame rate and startup time

The presenters explain that React Native has separate JavaScript and UI threads, so teams should monitor both: work blocking the UI thread can hurt scrolling, while a busy JavaScript thread can affect animations and input. They recommend production-mode checks with the React Native performance monitor and native profilers. In one social media app, profiling and reducing unnecessary re-renders improved frame rates and reduced dropped frames; in a sports betting app, switching to Hermes and reducing pre-renders cut time to interactive by 50%.

Measure app and JavaScript bundle size

The presenters recommend checking release packages through the app stores and inspecting JavaScript bundle contents with tools such as React Native Bundle Visualizer. They note that unused native dependencies can still be included in an app, and that Metro configuration can bundle unnecessary shared web code. Removing dependencies and correcting bundling reduced one client’s app size by 15%.

Monitor memory and CPU use

The presenters suggest Android Studio Profiler and Flipper for Android, and Xcode tools for iOS, to investigate memory and CPU use. For Dream11, resizing images and improving FastImage caching led to about 20% fewer dropped frames in an image list and faster chat interaction. In another project, replacing JavaScript dependencies, optimizing animations, and tuning FlashList reduced CPU spikes and improved time to interactive by 11% to 74% in key scenarios.

Make measurement part of development

The presenters recommend starting with tools teams already know, then tracking results continuously across releases or pull requests where possible. They advise profiling before adding memoization or monitoring libraries, since their effects depend on the app and setup. The closing message is to use measured data to guide optimization decisions instead of relying only on intuition.

Takeaways

  • Track JavaScript and UI frame rates separately because each thread can cause different user-facing problems.
  • Measure startup time on representative devices; the webinar suggests aiming for under one second where feasible.
  • Inspect both the full app package and its JavaScript bundle, and remove unused dependencies.
  • Profile memory and CPU alongside frame rate, since resource pressure can contribute to dropped frames and slower interaction.
  • Keep performance measurements in the development workflow and compare results across releases to catch regressions.

Mentioned in this talk

Search inside this talk

What was claimed 13

Show all 13 facts

Related talks