Performance Issues with React Native Bridgeless Architecture

[santhoshkumarvgds]

Description

The Bridgeless Architecture in React Native 0.74 and later introduces significant performance issues, particularly for apps with complex logic and high demands for UI responsiveness. Here are the main concerns:

Key Issues

1. Screen Load Times

• Problem: Synchronous communication with the native runtime slows down screen loading, particularly when multiple API calls are made.
• Impact: Initial loads are bottlenecked, reducing overall app responsiveness.

2. UI Responsiveness and Touch Lag

• Problem: The switch to synchronous communication impacts touch response, causing a laggy and less fluid user experience.
• Result: Reduced interaction quality and increased user frustration.

3. Lazy Module Loading

• Default Behavior: Bridgeless architecture loads modules lazily by default, contributing to delayed responses in complex pages.
• Partial Fix: Disabling lazy loading improves response slightly but doesn’t fully solve the underlying delay issues.

Comparative Performance with Older Versions

• Testing Results:
  • React Native 0.71.8 (asynchronous bridge): Modal with 32 API calls loads in approximately 3 seconds.
  • React Native 0.74.x / 0.76.1 (bridgeless): Modal with only 14 API calls takes over 10 seconds.

Attempts to Improve Performance

• Native Threads & Configuration Adjustments: Shifting API calls to native threads, and enabling/disabling options like Hermes and New Architecture, failed to yield significant performance improvements.

Call for Optimizations

The React Native community and core team are urged to provide optimizations or alternative solutions to enhance performance under the bridgeless architecture.

Feedback Needed: Community support and solutions for the architectural limitations causing these performance issues.

Steps to reproduce

1. Create a page/modal with 10-30 API calls.
2. Test in React Native 0.74.x or later (Bridgeless).
3. Measure load time and UI responsiveness.
4. Compare with 0.71.8 (Async Bridge).

Expected: Slower performance in the bridgeless versions.

React Native Version

0.74+

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

Bridgeless - The New Initialization Flow, Other (please specify)

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1
  Memory: 206.23 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.14.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.7.0
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK: Not Found
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9123335
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.7.4
    path: /Users/santhoshkumarvgds/.rvm/rubies/ruby-2.7.4/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: ^15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: ^0.76.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

The issue occurs when multiple API calls are made on initial screen load. The app becomes unresponsive and takes significantly longer to load the screen. Despite attempts to optimize by disabling lazy loading and using native threads, the issue persists. No crash or stack trace is generated, but the app's performance degrades considerably.

Reproducer

Reproducer: Unfortunately, I cannot provide a public repository or Expo Snack at this time. Please let me know if you would like further details or an isolated example of the issue.

Screenshots and Videos

No response

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[cortinico]

Reproducer: Unfortunately, I cannot provide a public repository or Expo Snack at this time. Please let me know if you would like further details or an isolated example of the issue.

Yes we would need an isolated reproducer to look into this.

[arasrezaei]

I agree, there are lots of lags and crashes.
When I turn newArch off, the app is much smoother

[lovegaoshi]

i know this isnt particularly helpful to most others, but i also oberved performance degradation when migrating my app to bridgeless. my sprcific issue is react-navigation drawer opening is particularly choppy and wont switch screens completely. this is not exactly the rn teams fault, but the general DX/UX of our apps are still impacted

[JustJoostNL]

@lovegaoshi did you manage to fix that choppy drawer animation? The new architecture heavily slows down my app, is there any timeline for fixing this?

[lovegaoshi]

unfortunately no. im reliant on react navigation and react native paper, and both have minor but unacceptable UX issues that i could not upgrade to the new arch with. right now im reinventing the wheel to write my own ui lib and migrate away from these ui libs. given other important libs like rn firebase or notifee also breaks, its peobably the best to not chase the newest feature.

…

On Wed, Nov 13, 2024, 11:43 AM Joost ***@***.***> wrote: @lovegaoshi <https://github.com/lovegaoshi> did you manage to fix that choppy drawer animation? The new architecture heavily slows down my app, is there any timeline for fixing this? — Reply to this email directly, view it on GitHub <#47490 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZMOVVT3NCGMGDL4IRIDT732AOTXLAVCNFSM6AAAAABRLKPMCKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZUGU4TKMJRG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[YasinAkimura]

I can also confirm that the new arch is causing a few performance issues regarding responsiveness,
and I think react-navigation / expo-router are not ready for the new arch yet.

I can notice a significant lag in catching touch events when doing things quickly which may indicate the blocking nature of synchronous events?

Also a few bugs where Views seem to always fade / animate when layout changes or Text with adjustToFitSize and "unacceptable" lineHeight completely bug out but these are different issues.