Improving React Native app performance: Practical tactics and case studies

Kuba says rapid growth can push performance work aside, creating technical debt and a frustrating user experience. Teams may struggle to identify bottlenecks, choose an effective fix, or prevent regressions. The panel emphasizes that performance work should continue throughout development.

The team describes its Define, Measure, Analyze, Improve, and Control process: set goals, establish a baseline, find root causes, implement changes, and monitor results. Eduardo covers five metrics: FPS, time to interactive, app size, memory, and CPU usage. Suggested tools include Flashlight, Xcode Instruments, Android Profiler, and Shopify’s performance tools.

The case study starts with falling store ratings, complaints about duplicate or delayed messages, and rising CPU and memory use. Chat scrolling reached about 42 FPS, CPU peaked at 34%, and memory use was around 700 MB. The team switched FlatList to FlashList, simplified component trees, reduced network requests, and avoided unstable defaults and repeated calculations.

After the changes, scrolling reached a stable 60 FPS, CPU use fell by 18%, and memory use fell by 30%; the presenters also reported more positive reviews and fewer communication complaints. In the Q&A, Eduardo recommends using memoization where it prevents costly work, keeping state close to the components that need it, and delaying nonessential startup work until after the app becomes interactive.