Flutter Vs React Native : Performance Benchmarks you can’t miss ! 🔥⚡️ [Part -1]
When it comes to mobile app development, the choice between Flutter and React Native often hinges on performance considerations. While both frameworks have their advocates, actual benchmark results are what many of us care for, especially for apps that can have complex UI/UX.
We were surprised to see very few benchmark comparisons for flutter and React Native and even those were quite old. So with current versions of Flutter & React Native, here’s a thorough benchmarking comparison in terms of App size, Memory & CPU usage. The results are interesting and surprising to say the least.
Benchmarked Apps
Three types of apps were benchmarked:
- Large Listview of 1000 items: Each item includes a static image and an infinitely rotating image.
- Bulk Images Animation: 200 images are simultaneously rotated, faded, and scaled.
- Bulk Lottie Animations: 36 Lottie animations displayed on a single screen.
Benchmarking Methodology
- Each benchmark was conducted on an M1 Mac.
- The benchmark apps were run on Oneplus 7 device for Android and iPhone 8 and iPhone 15 for IOS.
- In Android, Memory & CPU usage were measured using Android Profiler on the release apk for both flutter and React Native.
In IOS, each benchmark app was run in release mode. Memory & CPU usages were measured using Allocations & Time Profiler instruments respectively. - FPS was measured on “profile mode” for Flutter app and a JS minified & dev mode disabled build for React Native but with metro bundler connection. (Since RN performance stats are supported only when connected to metro bundler)
- Here’s the benchmarking source code : https://github.com/nateshmbhat/flutter-rn-performance-benchmarks
- For animation , built in Animation api is used in Flutter and industry standard Reanimated v3 is used in React Native.
Framework Versions Used :
React Native : 0.74.1 | Flutter: 3.19.5 | Dart: 3.3.3
Listview Performance
This app uses built in ListView and Animated api in flutter. Uses the latest Reanimated v3 library in React native and built in FlatList. Both the lists are being used as is without explicit optimisation or fixed height extents.
Click to see : Benchmark Results
Android :
Flutter :
- FPS: 60 (no jank)
- Dart heap memory usage: 7–8 MB
- APK size: 16.8 MB (7.6 seconds to build)
- Process memory: 120–130 MB (remained same when scrolling)
- CPU: 5–8% (remained same when scrolling)
- No jank or framedrops even on rapid scrolling
React Native :
- FPS: 50–55 (noticeable jank)
- APK size: 21.9 MB (23 seconds to build)
- Memory: 160 MB (when not scrolling), 180–190 MB (scrolling)
- CPU: 11–13% (when not scrolling), spiking to 25–30% (scrolling)
- Occasional framedrops and blank items while scrolling
IOS :
Flutter :
- Memory:
iPhone8 : 48 MB (remained same when scrolling)
iPhone15: 93 MB (remained same when scrolling) - CPU: 40–60% (remained same when scrolling)
- No jank or framedrops on rapid scrolling
- Archive size: 71.5 MB (Build Time : 30 seconds)
React Native :
- Memory:
iPhone8 : 1.05 GB and drops to ~453 MB on scrolling.
iPhone15 : 1.12 GB and drops to ~430 MB on scrolling. - CPU: 120–140% for first 5 seconds, then drops to ~50% when not scrolling. Spikes to 140–150% on scrolling.
- No framedrops but sometimes abruptly stops the scrolling when scrolled rapidly (user has to scroll again)
- Archive size: 112.3 MB (Build Time : 318 seconds)
Android : Flutter scrolled smoothly with no memory or CPU spikes during scrolling, whereas React Native exhibited frame drops and significant CPU & Memory spikes.
IOS : Very high memory usage in React Native. Flutter uses least amount of memory and CPU. Interestingly on ios, unlike android, memory usage drops to half in React Native on scrolling while CPU usage spikes.
Bulk Images Animation
Click to see : Benchmark Results
Android :
Flutter :
- FPS: 58–60
- Dart Heap: 13.4 MB
- APK size: 11.6 MB (19.6 seconds to build)
- Memory: 128–135 MB
- CPU: 8%
React Native :
- FPS: 58–60 (with occasional drops)
- APK size: 21 MB (20 seconds to build)
- Memory: 380–396 MB
- CPU: 12–16%
IOS :
Flutter:
- Memory:
iPhone8 : 49 MB
iPhone15 : 94 MB - CPU:
iPhone 8 : 50–60%
iPhone 15 : 23% - No visible janks or framedrops
- Archive size: 71.2 MB (Build Time : 33 seconds)
React Native:
- Memory:
iPhone 8 : 1.2 GB (Low Memory warning and eventual crash)
iPhone 15 : 1.38 GB (No crash) - CPU :
iPhone 8 : 135–140% (Eventual crash after about few seconds)
iPhone 15 : 200–300% for first 3.5 seconds then reduced to 50–60% - Severe janks, framedrops and eventual crash in iPhone 8. Only initial janks in iPhone 15
- Archive size: 112.3 MB (Build Time : 317 seconds)
Android : Both frameworks maintained a similar FPS, but React Native experienced FPS drops at animation restarts and significantly higher memory usage.
IOS : High CPU and very high memory spike in React Native and eventual crash in older iPhones. Flutter seems to run fine with lower resource consumption.
Bulk Lottie Animations
Click to see : Benchmark Results
Android :
Flutter :
- FPS: 36
- APK size: 7.6 MB (20.8 seconds to build)
- Memory: 220 MB
- CPU: 11%
Android :
- FPS: 43
- APK size: 18.5 MB (23 seconds to build)
- Memory: 240 MB
- CPU: 22%
IOS :
Flutter :
- Memory:
iPhone8 : 150–165 MB
iPhone15 : Increased up to 255 MB and remained at 255 MB - CPU:
iPhone8 : 120–140%
iPhone15 : 50–70% - Archive size: 72.9 MB (Build Time : 29 seconds)
React Native:
- Memory: Increased slowly upto 125 MB and remained at 125 MB (both iPhones)
- CPU:
iPhone8 : 100% for 6 seconds then reduces to 50–60%
iPhone15 : 60–80% - Archive size: 133.5 MB (Build Time : 304 seconds)
Android : React Native had higher FPS than Flutter but had higher CPU and memory usage.
IOS: React Native consumed less memory and CPU than Flutter.
New Update : As per flutter’s recent 3.22 release article, lottie rendering performance has significantly improved for it’s impeller rendering engine. This benchmark uses Flutter 3.19.5. I’m yet to run this benchmark with impeller for this new version on android.
Starter Project Comparisons
When we first create a project in react native or flutter, an unexpected finding was that the Apk Size for react native is significantly higher than that of flutter app for the starter project.
Although this particular case is not a perfectly fair comparison (given the fact both starter apps are different) and can be excluded as a performance benchmark result, it does present some interesting observations.
Note that app creation time is more in React Native since the entire react-native library gets downloaded when setting up a new project while flutter sdk already needs to be downloaded before creating new app.
Final Verdict
Android : All benchmarks consistently showed Flutter’s APK sizes were smaller, and its CPU & memory usage was marginally better than that of React Native.
IOS : Very high resource consumption by React Native compared to flutter except in Bulk Lottie animations app where flutter consumed more resources.
Next Steps :
- Do performance benchmark with React Native’s New Architecture enabled.
- Improve visualization of the metrics for ios.
Upcoming posts
Will soon be posting more detailed benchmark comparisons along with snapshot data for memory and cpu usages.
So, stay tuned for that !
