React Native vs. Flutter: Which Delivers Better Performance for Modern Apps?

When it comes to mobile app development, developers often face a key decision: Flutter or React Native? While both frameworks are popular and come with strong communities, the final choice often hinges on performance metrics. These metrics are particularly vital for apps with complex UI/UX needs.

Despite the popularity of both frameworks, we noticed a lack of recent, comprehensive performance benchmarks. Most available comparisons were either outdated or incomplete. To bridge this gap, we conducted detailed performance tests using the latest versions of Flutter (3.19.5) and React Native (0.74.1). Our goal? To benchmark their performance in terms of app size, memory consumption, and CPU usage across various use cases.

This article dives deep into our findings, highlighting the strengths and weaknesses of each framework.

Benchmark Setup

Devices Used:

• Android: OnePlus 7
• iOS: iPhone 8 and iPhone 15

Tools and Methodology:

• Android: Memory and CPU usage were measured using Android Profiler on release APKs for both frameworks.
• iOS: Allocations and Time Profiler instruments were used for memory and CPU profiling in release mode.
• FPS (Frames Per Second): Measured in "profile mode" for Flutter and using a minified JS build with the Metro bundler for React Native.
• Animation Libraries: Flutter's built-in Animation API and React Native's Reanimated v3 were used for performance consistency.

Framework Versions:

• React Native: 0.74.1
• Flutter: 3.19.5
• Dart: 3.3.3

Benchmarked Use Cases

Three types of applications were tested to measure performance:

1. Large Listview (1000 items): Each item included a static image and an infinitely rotating image.
2. Bulk Images Animation: Simultaneous rotation, scaling, and fading of 200 images.
3. Bulk Lottie Animations: Display of 36 Lottie animations on a single screen.

Benchmark Results

1. Large Listview Performance

Android:

• Flutter:

  • FPS: 60 (smooth scrolling, no jank)
  • Dart heap memory usage: 7–8 MB
  • APK size: 16.8 MB
  • Process memory: 120–130 MB (constant during scrolling)
  • CPU: 5–8% (steady during scrolling)

• React Native:

  • FPS: 50–55 (noticeable jank)
  • APK size: 21.9 MB
  • Memory: 160 MB (idle), 180–190 MB (scrolling)
  • CPU: 11–13% (idle), spiking to 25–30% (scrolling)

iOS:

• Flutter:

  • Memory: 48 MB (iPhone 8), 93 MB (iPhone 15)
  • CPU: 40–60% (steady during scrolling)
  • Archive size: 71.5 MB

• React Native:

  • Memory: 1.05 GB (iPhone 8, idle), dropping to 453 MB during scrolling.
  • CPU: Spiked to 140–150% during scrolling.
  • Archive size: 112.3 MB

Insights:

Flutter demonstrated smoother scrolling and better memory/CPU management across devices. React Native exhibited jank and higher resource consumption, particularly on iOS.

2. Bulk Images Animation

Android:

• Flutter:

  • FPS: 58–60
  • Memory: 128–135 MB
  • CPU: 8%

• React Native:

  • FPS: 58–60 (occasional drops)
  • Memory: 380–396 MB
  • CPU: 12–16%

iOS:

• Flutter:

  • Memory: 49 MB (iPhone 8), 94 MB (iPhone 15)
  • CPU: 50–60% (iPhone 8), 23% (iPhone 15)

• React Native:

  • Memory: 1.2 GB (iPhone 8, leading to crash), 1.38 GB (iPhone 15)
  • CPU: 135–140% (iPhone 8, leading to crash), 50–60% (iPhone 15)

Insights:

Flutter handled animations more efficiently with consistent memory and CPU usage. React Native struggled on older devices, leading to crashes due to high memory and CPU consumption.

3. Bulk Lottie Animations

Android:

• Flutter:

  • FPS: 36
  • Memory: 220 MB
  • CPU: 11%

• React Native:

  • FPS: 43
  • Memory: 240 MB
  • CPU: 22%

iOS:

• Flutter:

  • Memory: 150–165 MB (iPhone 8), 255 MB (iPhone 15)
  • CPU: 120–140% (iPhone 8), 50–70% (iPhone 15)

• React Native:

  • Memory: 125 MB (both iPhones)
  • CPU: 100% for the first 6 seconds, then reduced to 50–60%.

Insights:

On Android, React Native had slightly better FPS but consumed more resources. On iOS, Flutter used more memory, while React Native showed better efficiency in this scenario.

Starter Project Comparisons

Creating a starter project highlighted some interesting differences:

• Flutter: Smaller APK sizes due to pre-installed SDKs.
• React Native: Larger APK sizes as it downloads the entire library during setup.

Final Verdict

Android: Flutter outperformed React Native with smaller APK sizes, smoother scrolling, and better resource management.

iOS: Flutter demonstrated superior performance in most benchmarks, except for Lottie animations, where React Native used fewer resources.

Next Steps

Future comparisons will include:

1. React Native's new architecture for enhanced performance.
2. Benchmarks using Flutter’s latest Impeller rendering engine (post version 3.22).

Stay tuned for more insights and detailed visualizations!

Comments

[Vitaly Statsura]

Сould you provide repositories with examples used for benchmarking? Without them, there are big questions about the relevance of the data.