Upgrading from v0.70.6 to v0.71.0 causing extremely slow debugging mode on Android

[alabsi91]

Description

I recently upgraded my react-native project from version 0.70.6 to 0.71.0 using the React Native Upgrade Helper and have noticed a significant decrease in performance when using the debugging mode. The app takes much longer to load and the debugging process is extremely slow, making it difficult to make any changes.

Version

0.70.1

Output of npx react-native info

System: OS: Windows 10 10.0.22621 CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor Memory: 4.42 GB / 15.93 GB Binaries: Node: 18.13.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 31, 32, 33 Build Tools: 30.0.3, 31.0.0, 33.0.0 System Images: android-31 | Google Play Intel x86 Atom_64 Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-213.7172.25.2113.9123335 Visual Studio: 17.4.33110.190 (Visual Studio Community 2022) Languages: Java: 11.0.17 npmPackages: @react-native-community/cli: Not Found react: ^18.2.0 => 18.2.0 react-native: ^0.71.0 => 0.71.0 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Upgrade react-native project from version 0.70.6 to 0.71.0 Run the app in debugging mode Notice the slow performance and long loading time

Snack, code example, screenshot, or link to a repository

//

[edsztukowski]

We're experiencing the same issue, we upgraded from RN 0.70.1.

[manosKas]

+1

at least 2 to 4 seconds for any button to take action.

I'm guessing it has something to do with forcing all libraries to use 0.71.0

since i can only launch the app if i've built with the following in app/build.gradle:

configurations.all {
    resolutionStrategy {
        force 'com.facebook.react:react-native:0.71.0'
    }
}

cause otherwise i would get the following error:

couldn't find DSO to load: libjscexecutor.so

Another thing that may or may not be the cause is that my project is still in javascript as i haven't moved to typescript as stated in 0.71.0

[bezenson]

Oh, I spent so many time today thinking that one of my dependencies works wrong... Yeah, seems like this is React Native issue

[muzhaqi16]

I am having the same issue after upgrading, It takes about 2-4 after pressing something to respond, and the whole application is slow.

[muzhaqi16]

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
    Memory: 14.89 GB / 31.69 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Disabled
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: Not Found
  Languages:
    Java: 18.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.0 => 0.71.0 
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[bezenson]

I want to add, that not only buttons (touchable) works slowly. UI updates on active screen are throttling. And what is interesting - React Navigation transition animations works fine. And ScrollView works fine. Perf monitor shows -2 FPS sometimes (whatever that means)

[cortinico]

Thanks for the issue report. Several questions to help me investigate what's going on:

1. Are you using Hermes or JSC?
2. Is this happening also on a blank project created with npx react-native init RN071?

[bezenson]

1. Hermes
2. Yes. I started new project. You can see that links on default page work a bit slowly. But if you setup basic React Navigation with 2 screens you can see how long it takes to start switching screens

p.s. production build via ./gradlew assembleRelease works fine, no throttling. Only dev mode issue on android

[AlirezaHadjar]

I'm facing the same issue. On the bright side, everything is normal in the release apk. By the way Cortinico I'm using Hermes.

[cortinico]

@inferusvv Does the issue happens also if you disable Hermes (there is a flag in the app/android/gradle.properties file)?

[muzhaqi16]

I am using Hermes and the blank react-native project works fine.

[bezenson]

@cortinico Without Hermes it works fine.

I've set hermesEnabled=false at android/gradle.properties

[muzhaqi16]

I can also confirm that once Hermes is disabled, it works fine. hermesEnabled=false

[cortinico]

@cortinico Without Hermes it works fine.

Thanks for the confirmation. We'll be releasing 0.71.1 sometime next week with the fix for this. I believe the version of Hermes that comes with 0.71.0 is coming with Hermes in Debug mode which is causing this. I'll publish an update on this issue once we have the point release out.

For the time being you can either:

• Disable Hermes
• Stay on 0.70.x

[alkanyunus]

Why is upgrading react-native is so HARD? cant upgrade to 0.71 and upgrade helper cannot help me!!

[manosKas]

@saxahan send me an email with your issue, i may be able to help

[alkanyunus]

@saxahan send me an email with your issue, i may be able to help

Thanks for your helpful thought. I managed to upgrade step by step by hands. Now I can run android and ios. However; ios cannot be installed from react-native run-ios, so I installed via Xcode.

And yes, android is super throttled now

[Stecken]

for me too, I realized that version 0.71 is super throttled.

When starting Metro, you already feel the lag.

[engmja]

same issue here

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[cortinico]

Hey @alabsi91 @inferusvv @muzhaqi16 I do have a potential fix, but I'm looking into getting a reproducer to validate this fix before we include it in 0.71.1.

So if you or anyone else could provide a reproducer, that would be greatly beneficial to verify this.

[enahum]

@cortinico feel free to share the details and I can test it as is reproducing for me as well

[cortinico]

@cortinico feel free to share the details and I can test it as is reproducing for me as well

The fix is nothing you can change locally as you would need a newer version of Hermes that needs to be prebuilt. So I would need a Github project, starting from npx react-native init RN071 which reproduces this issue. I will test it on my machine and we'll follow up as soon as the issue is fixed in a numbered release.

[enahum]

@cortinico feel free to share the details and I can test it as is reproducing for me as well

The fix is nothing you can change locally as you would need a newer version of Hermes that needs to be prebuilt.

So I would need a Github project, starting from npx react-native init RN071 which reproduces this issue. I will test it on my machine and we'll follow up as soon as the issue is fixed in a numbered release.

Ok, Sadly at the moment I won't be able to create a new repo

[alabsi91]

@cortinico

• Tested on Android Emulator and Samsung S10 device - debug mode - Hermes enabled.
• a simple test app with react navigation and FlatList, I hope this will hellp. https://github.com/alabsi91/RN071-hermes-debug-throttle-issue

[bezenson]

@alabsi91 Thank you for demo, also wanted to create :)

I wondered, is it possible that it is an issue of reanimated? @migueldaipre Attached another issue from software-mansion project

[manosKas]

@inferusvv React-Navigation uses the Reanimated library, so...

[migueldaipre]

I believe it has no connection, the problem in reanimated happened in release builds.

[bezenson]

@inferusvv React-Navigation uses the Reanimated library, so...

Yeah, that is why I have such question :) I see that everyone here is using react navigation. Let's see what happens after Reanimated updated. They merged attached to this issue MRs, but honestly I have no idea what about they are 😅

[cortinico]

@alabsi91 Thanks for the repro, I was able to confirm that the fix is working. It will be available in 0.71.1

And no, the issue is not related to react-navigation but to how we build and bundle Hermes