Hermes as the New React Native JavaScript Engine

With the release of React Native 0.70, Hermes is now the default JavaScript engine for React Native - but what does that actually mean?

Today we'll look into what a JavaScript engine is and why React Native is using a new one.

What is a JavaScript Engine?

A JavaScript engine is a software component that executes JavaScript code (wikipedia). This means that it's what takes the JavaScript you write and makes it do the things you want it to.

These engines are often developed by the people who build web browsers. In the Node.js world the most common one you would run into is V8.

What JavaScript Engine Did React Native Use?

This is kind of a trick question because, historically, it could be one of two.

Typically your JavaScript would be executed by JavaScriptCore. This was built into the device (iOS) or bundled with the app (Android).

However, if you had debugging enabled your JavaScript would be executed by the previously mentioned V8 engine.

You may be thinking there are a few downsides with this:

Different engines could cause inconsistencies between "normal" behavior and debugging behavior
Shipping a JavaScript engine with your app seems like it would increase app size

And you'd be right!

Why Hermes?

Hermes is an open-source JavaScript engine optimized for mobile. It starts quickly, is small in size, and has low memory usage - all great features for something running on a mobile device.

All of these design factors will result in improved start-up time, decreased memory usage, and smaller app size.

Basically, it's a purpose built JavaScript engine for React Native that makes your app work better and use less resources.

Yes, we still run into the increased size of an app due to shipping an additional JavaScript engine but the benefits certainly seem to outweigh the downsides.

How to Use Hermes?

Let's work through this in terms of ease of configuration by React Native version.

Whenever making upgrades to your workflow (or any work on your app) I would highly suggest doing so in a dedicated branch to ensure you can rollback to a known working app in case anything goes wrong.

v0.70+

You're all set! Hermes is the default engine already and you should be all set to use it. You can confirm that it's in use by looking at global.HermesInternal.

Here are some instructions on how to use Chrome's DevTools alongside Hermes.

v0.69.x

Hermes is already bundled with your version of React Native so you'll just need to enable it on iOS and Android by following the official docs.

You can confirm that it's in use by looking at global.HermesInternal.

v0.64.x to v0.68.x

Enable Hermes in your app and install the correct version of Hermes for you version of React Native.

You can confirm that it's in use by looking at global.HermesInternal.

v0.60.4 to v0.63.x

Hermes is not compatible on iOS.

For Android you'll want to enable Hermes in your app and install the correct version of Hermes for you version of React Native.

You can confirm that it's in use by looking at global.HermesInternal.

v0.60.3 and below

Hermes is not compatible on iOS or ANdroid