Application gets slow with enabled Hermes Engine on IOS

[hryhoriiK97]

Description

The react-native application gets slow with enabled the Hermes Engine on IOS. I tested it in debug and release.

Version

0.70.6

Output of npx react-native info

System: OS: macOS 11.6 CPU: (8) arm64 Apple M1 Memory: 365.16 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.15.0 - ~/.nodenv/shims/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.5.5 - ~/.nodenv/shims/npm Watchman: 2022.10.31.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 23, 25, 26, 27, 30, 31, 32, 33 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0 System Images: android-29 | Google Play ARM 64 v8a, android-30 | Android TV Intel x86 Atom, android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play ARM 64 v8a, android-31 | Google Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a, android-33 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8512546 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.15 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.6 => 0.70.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

:hermes_enabled => false - application work with a good performance :hermes_enabled => true - application work very slow

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

With enabled Hermes Engine. With the switch off Hermes Engine.

[shidudu2022]

I got the same problem, is there any solution

[sagar-tomar-groww]

any updates/solution here ? same issue !!global.HermesInternal --- returns true but after debugging ipa, found main.jsbundle doesn't have bytecode. @cortinico

[cortinico]

@hryhoriiK97 have you solved this issue? Could you try on 0.71?

[sagar-tomar-groww]

@cortinico What could be the reason that ios bundle doesn't have bytecode even after setting :hermes_enabled => true. Manually generated the bundle using node_modules/react-native/sdks/hermesc/osx-bin/hermesc -O -emit-binary -output-source-map -out=main.jsbundle.hbc main.jsbundle Bundle got generated with bytecode and after replacing it in the build, it works fine.

[sagar-tomar-groww]

Fixed this issue by patching node_modules/react-native/scripts/react-native-xcode.sh the check conditions on USE_HERMES flag are not pointing to hermes as default. For ex: check should be USE_HERMES == false rather than USE_HERMES != true to use JSC which requires USE_HERMES var to be true explicitly. `+# If hermes-engine is in the Podfile.lock, it means that Hermes is a dependency of the project +# and it is enabled. If not, it means that hermes is disabled. +HERMES_ENABLED=$(grep hermes-engine $PODS_PODFILE_DIR_PATH/Podfile.lock) + +# If hermes-engine is not in the Podfile.lock, it means that the app is not using Hermes. +# Setting USE_HERMES is no the only way to set whether the app can use hermes or not: users +# can also modify manually the Podfile. +if [[ -z "$HERMES_ENABLED" ]]; then

• USE_HERMES=false +fi

HERMES_ENGINE_PATH="$PODS_ROOT/hermes-engine" [ -z "$HERMES_CLI_PATH" ] && HERMES_CLI_PATH="$HERMES_ENGINE_PATH/destroot/bin/hermesc"

Hermes is enabled in new projects by default, so we cannot assume that USE_HERMES=1 is set as an envvar.

If hermes-engine is found in Pods, we can assume Hermes has not been disabled.

If hermesc is not available and USE_HERMES is either unset or true, show error.

-if [[ -f "$HERMES_ENGINE_PATH" && ! -f "$HERMES_CLI_PATH" ]]; then +if [[ ! -z "$HERMES_ENABLED" && -f "$HERMES_ENGINE_PATH" && ! -f "$HERMES_CLI_PATH" ]]; then echo "error: Hermes is enabled but the hermesc binary could not be found at ${HERMES_CLI_PATH}."
"Perhaps you need to run 'bundle exec pod install' or otherwise "
"point the HERMES_CLI_PATH variable to your custom location." >&2 @@ -129,7 +140,7 @@ fi

PACKAGER_SOURCEMAP_FILE= if [[ $EMIT_SOURCEMAP == true ]]; then

• if [[ $USE_HERMES == true ]]; then

• if [[ $USE_HERMES != false ]]; then PACKAGER_SOURCEMAP_FILE="$CONFIGURATION_BUILD_DIR/$(basename $SOURCEMAP_FILE)" else PACKAGER_SOURCEMAP_FILE="$SOURCEMAP_FILE" @@ -138,7 +149,7 @@ if [[ $EMIT_SOURCEMAP == true ]]; then fi

Hermes doesn't require JS minification.

-if [[ $USE_HERMES == true && $DEV == false ]]; then +if [[ $USE_HERMES != false && $DEV == false ]]; then EXTRA_ARGS="$EXTRA_ARGS --minify false" fi

@@ -153,7 +164,7 @@ fi $EXTRA_ARGS
$EXTRA_PACKAGER_ARGS

-if [[ $USE_HERMES != true ]]; then +if [[ $USE_HERMES == false ]]; then cp "$BUNDLE_FILE" "$DEST/" BUNDLE_FILE="$DEST/main.jsbundle" else`

[cortinico]

@cortinico What could be the reason that ios bundle doesn't have bytecode even after setting :hermes_enabled => true. Manually generated the bundle using

@sagar-tomar-groww please don't hijack other's people issue. The problem reported was slow debugging experience on iOS on React Native 0.70. This was fixed in a point release. I'm going to close as the original author is unresponsive.

If you're having a problem with Hermes bundle, please open a separate issue.