Using Hermes in React Native

What is Hermes?

Hermes is an open-source JavaScript engine specifically optimized for React Native applications. Unlike traditional JavaScript engines such as JavaScriptCore, Hermes was designed from the ground up with mobile application performance as its primary goal. By precompiling JavaScript to optimized bytecode during the build process, Hermes eliminates the parsing and compilation overhead that developers traditionally experience when their apps launch.

React Native has shipped Hermes as a bundled component since version 0.70, making it the default JavaScript engine for all new React Native applications. This decision followed extensive testing and validation across Meta's internal applications and the broader React Native community.

Key Differences from JavaScriptCore

Understanding Hermes requires recognizing how it differs from JavaScriptCore, the engine that preceded it as React Native's default. JavaScriptCore implements just-in-time compilation, parsing and compiling JavaScript code while the application runs. While this approach works well for desktop browsers with abundant computational resources, it creates measurable delays on mobile devices during application startup.

Hermes eliminates these delays through its ahead-of-time compilation strategy. When you build your React Native application, the Hermes compiler transforms your JavaScript source code into a compact bytecode format optimized for the target platform.

Performance Benefits

The performance improvements Hermes delivers manifest across multiple dimensions of application behavior. Startup time--the period between a user tapping your application icon and seeing the first meaningful screen--shows the most dramatic improvements. In benchmark testing with the Expensify application, a real-world complex React Native app, Hermes reduced bundle load time by 3.2% on low-end Android devices and 9% on iOS devices.

Time to Interactive Metrics

Time to Interactive (TTI) metrics show similarly impressive gains. Total TTI, which measures the duration from bundle loading to when the first screen becomes interactive, improved by 7.6% on Android and 2.5% on iOS. Content TTI, measuring when specific components become interactive, improved by 7.2% on Android and 7.5% on iOS.

Memory and Size Benefits

Memory consumption reductions benefit both user experience and application stability. Lower memory usage reduces the likelihood of encountering out-of-memory conditions on memory-constrained devices. The reduced memory footprint also enables better multi-tasking behavior.

Application size benefits arise from the more efficient bytecode representation. Smaller application sizes improve installation times, reduce update download sizes, and decrease the storage footprint on user devices. These improvements are particularly valuable for mobile applications targeting users in regions with slower network connections.

Verifying Hermes in Your Application

Before diving into configuration, confirming that Hermes is running in your application ensures you're receiving the expected performance benefits.

Direct Verification

The most direct verification approach examines the global HermesInternal object, which exists only when Hermes is the active JavaScript engine:

const isHermes = () => !!global.HermesInternal;

Calling this function returns true when Hermes is active, providing immediate confirmation.

Version Information

For more detailed information about the active Hermes version, you can access the runtime properties:

HermesInternal.getRuntimeProperties()['OSS Release Version'];

This returns the specific Hermes version string, useful for confirming you've received expected version updates.

Hermes V1: The Next Generation

React Native 0.82 introduced Hermes V1 as an experimental opt-in feature, representing the next evolution of the Hermes engine with significant performance improvements over the current stable version. This experimental release demonstrates Meta's continued investment in Hermes development and provides a preview of optimizations that will eventually become the default.

Hermes V1 builds upon the foundation established by the original Hermes engine, adding improvements in both the compiler and virtual machine components. Early testing shows performance improvements across various scenarios, with the most significant gains appearing in bundle loading and Time to Interactive metrics.

Enabling Hermes V1

Enabling Hermes V1 requires modifying your project configuration:

1. Update package.json to resolve the experimental compiler version
2. Configure Android with hermesV1Enabled=true
3. Configure iOS with RCT_HERMES_V1_ENABLED=1

Note: Hermes V1 requires building React Native from source and is currently experimental.

For teams building cross-platform applications, staying current with Hermes developments ensures you leverage the latest performance optimizations as they mature from experimental to stable.

Platform-Specific Configuration

Android Configuration

React Native's Android integration with Hermes requires minimal configuration for the stable version, as recent project templates enable Hermes by default.

The android/gradle.properties file controls many React Native build settings. For Hermes V1 experimentation, add hermesV1Enabled=true to enable the experimental engine version.

Important: Hermes V1 requires building React Native from source. Configure your android/settings.gradle to include the React Native source build with appropriate dependency substitutions.

For production applications, our mobile app development services team can help you configure Hermes optimally for your specific use case.

iOS Configuration

iOS configuration for Hermes centers on the CocoaPods integration and build-time flags.

The RCT_HERMES_V1_ENABLED environment variable controls Hermes V1 enablement for iOS builds. Set this variable to 1 when running pod install.

Note: Prebuilt React Native core configurations conflict with Hermes V1 on iOS. Ensure RCT_USE_PREBUILT_RNCORE is not set when using Hermes V1.

When building cross-platform applications, our React Native development expertise ensures your iOS and Android apps share optimized performance characteristics.

Best Practices for Hermes Optimization

Build Configuration

Ensure your production builds actually compile JavaScript to Hermes bytecode rather than shipping source JavaScript. Release builds should always use production build modes, which trigger the Hermes compilation pipeline.

Bundle Size Optimization

Large JavaScript bundles take longer to compile and result in larger bytecode representations. Code splitting and lazy loading strategies can reduce initial bundle sizes.

Third-Party Library Compatibility

Most npm packages work correctly with Hermes, but libraries using browser-specific APIs or Node.js built-ins may require polyfills. Check the React Native documentation for known compatibility issues.

Monitoring and Profiling

Establish baseline metrics before enabling or upgrading Hermes, then measure the actual impact on your application's performance characteristics using React Native's development menu and platform-specific profiling tools.

New Architecture Compatibility

Modern React Native versions default to the New Architecture, and Hermes integrates seamlessly with these configurations. The combination of New Architecture and Hermes delivers the best available React Native performance. Our web development services team stays current with these architectural advances to deliver optimal results.

Performance Testing

When optimizing React Native applications, comprehensive testing ensures your changes deliver the expected improvements. Our quality assurance services include mobile performance testing across various devices and network conditions.

Sources

1. React Native: Using Hermes - Official documentation on enabling, configuring, and verifying Hermes in React Native applications

2. React Native 0.82: A New Era - Official release announcement detailing Hermes V1 improvements, benchmarks, and enablement instructions

3. Netguru: Top Tips to Boost React Native Performance in 2025 - Industry perspective on Hermes as a performance optimization strategy