Users will tolerate a lot from a mobile app — confusing UI, missing features, occasional bugs — but they won't tolerate slow. An app that stutters on scroll, takes three seconds to open, or drains the battery gets deleted. Here's how we systematically find and fix performance problems.
Profile Before You Optimise
The cardinal rule of performance engineering applies just as much on mobile: measure first. Optimising by intuition wastes time and often makes things worse. For React Native, the Hermes profiler and Flipper's performance monitor are your starting points. For native iOS, Instruments with the Time Profiler template. For Android, Android Studio's CPU Profiler. Identify the actual bottleneck before touching code.
List Rendering Is Usually the First Culprit
In almost every performance audit we've done, lists are the first thing we fix. FlatList in React Native is powerful but easy to mis-configure. Ensure keyExtractor returns stable, unique keys. Set getItemLayout if your items have fixed heights — this eliminates expensive layout calculations during scroll. Use windowSize and maxToRenderPerBatch to control how aggressively items are rendered. Consider FlashList from Shopify, which achieves significantly better frame rates than FlatList on long lists through component recycling.
Images Are Almost Always a Problem
Unoptimised images cause both slow load times and excessive memory usage. Serve images at the correct display resolution — not at 4x the size and scaled down. Use progressive loading with a small blurred placeholder while the full image loads. Consider a caching layer like react-native-fast-image, which handles memory and disk caching far more intelligently than the built-in Image component.
JavaScript Thread Congestion
React Native's JavaScript thread and UI thread are separate, but they communicate constantly. Heavy computation on the JS thread during animation causes dropped frames. Move expensive synchronous work off the main thread: use InteractionManager to defer non-critical work until after animations complete, push computation-heavy operations to a native module or a worklet (via Reanimated's useAnimatedStyle), and avoid synchronous storage reads on startup.
App Startup Time
Time to interactive on first launch is a moment of truth. Audit your startup by removing the app from memory and cold-launching with profiling enabled. Common startup bloat: importing modules you don't need immediately, synchronous calls to AsyncStorage, and large initial Redux/Zustand state rehydration. Defer everything that isn't needed for the first screen.
