React Native 0.70 is out, and Hermes is the new default JavaScript engine shipping with this update. Here’s what to expect from Hermes and some of the features that will affect the performance of your React Native application.

What Is Hermes?

Hermes is an open-source JavaScript engine that optimizes performance during iOS and Android application launches by pre-compiling JavaScript code into efficient bytecode and reducing application memory usage.

Updating Older React Native Versions to Support Hermes

React Native applications running on 0.70 will have Hermes enabled by default. For older React Native applications, a Hermes build ships with every React Native version starting from version 0.60.4 for Android builds and version 0.64.0 for iOS. The matching versions eliminate the risk of a dependency mismatch in your React Native application.

To enable Hermes in these older versions of React Native, you’ll need to add some configuration to both your Android and iOS applications.

On Android, edit your android/app/build.gradle file:

        project.ext.react = [
    entryFile: "index.js",
    enableHermes: true // clean and rebuild if changing
]

On iOS, you make the following changes to your ios/Podfile:

        use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
)

iOS requires you to install Hermes pods after configuring settings.

Run the following command to install the pods:

        cd ios && pod install

Enabling Hermes With Expo

You can also use the Hermes engine for React Native applications built or run using Expo. The Expo library supports Hermes from SDK version 42 on Android and SDK version 43 on iOS to the current version 0.70. It is important to note that standalone applications cannot run Hermes unless built using the Expo Application Services Build.

To enable Hermes in a React Native application, edit your app.json file:

        {
  "expo": {
    "jsEngine": "hermes"
  }
}

Now your application built with Expo Application Services will have Hermes enabled as its JavaScript engine.

Hermes Performance Optimization for React Native Apps

Most JavaScript engines parse all the JavaScript source code using a JIT (Just in Time) compilation system. The JIT system slows down execution because your device must wait for the entire compilation process to complete. Hermes uses an ahead-of-time compilation (AOT) approach, transferring most of the heavy-duty JavaScript engine work to build time.

Hermes mainly affects three metrics of application performance: the application TTI (Time to Interactive), binary size, and memory usage.

Time to Interactive

The TTI is the time it takes an app to load and support user interaction like scrolling or typing. Hermes improves the average TTI for React Native applications compared to other JavaScript engines.

This reduction in TTI is because Hermes does not run a JIT compiler.

Binary Size

The binary size is the size of the bundled React Native application. Android applications use the APK file format, while iOS apps use a format Apple calls IPA. Using Hermes significantly reduces application size on Android devices.

Memory Usage

Memory usage is another critical metric to optimize in applications. An application's user experience would be negatively affected if it uses too much memory. Hermes implements a Garbage Collector system that regulates memory usage on demand, ensuring an application only uses needed memory space while running.

Debugging React Native With Hermes and Chrome DevTools

Hermes comes with a new experience for debugging React Native applications running on an emulator, simulator, or physical device using Expo. Hermes supports debugging React Native applications using Chrome DevTools’s Inspector Protocol. You should not confuse this with traditional JavaScript debugging using the browser’s console.

To configure Chrome to debug Hermes applications, follow these steps.

  1. Navigate to chrome://inspect inside your Chrome browser.
  2. Click on the Configure button.
    The Chrome DevTools devices panel with a Configure… button
  3. Inside the on-screen modal, input the server address for the metro bundler running your React Native application and click Done.
    The Chrome DevTools Target network panel with available network server addresses

You can now debug your React Native application using the Hermes target inspect link.

Why Hermes Is Optimized for Only React Native

Hermes’ optimal performance as a React Native JavaScript engine is partly down to its runtime environment. In React Native, you bundle all JavaScript code within the application environment. This system makes shipping bytecode efficient.

Another factor to consider is the amount of work done during JavaScript compilation. Hermes manages the frequent user interaction anticipated of mobile applications while avoiding aggressive bytecode optimization. A JIT compiler JavaScript engine would not perform tasks this way.