React Native 0.64

The Facebook team recently announced their newest React Native version, which comes with some huge improvements. While some of these changes are focused on the developer experience, the main ones will benefit all users of these apps.

Hermes for iOS

Hermes is a JavaScript engine specifically built for React Native, which provides faster launch times, decreased memory usage, and smaller app sizes. These benefits together provide the user with a faster, easier experience to get started using your app, especially those on older devices who might not have as much memory or storage space available. Hermes as an engine has been around since its debut at Chain React 2019, but previously it was only available for use on Android. Now, with version 0.64, Hermes can be enabled on iOS devices.

In a direct comparison done by the engineering team at Facebook of a React Native app leveraging Hermes versus another without the Hermes engine, we identified 3 key improvements we see having an immediate impact on app performance:

• The time to interaction was over 2 seconds faster
• The memory utilization was almost 50MB less
• The application was almost 20MB smaller

Hermes Proxy Support

With all of the improvements mentioned above for apps running Hermes, some apps were unable to use Hermes due to compatibility issues with popular libraries (for example react-native-firebase and mobx). Proxy support has now been added to Hermes in this version to allow those apps to enable Hermes and get all of the performance benefits that come with it.

Performance tracing with Hermes

Previously, being able to do an in-depth analysis of the performance of your application took additional plugins or libraries. Now, developers running React Native using Hermes can easily check these details in the Performance tab of Chrome DevTools to ensure the app is always running at the high speeds we expect. This also allows developers to more easily debug any performance issues and isolate areas of the app that might need some more optimization.

Inline Requires enabled by default

According to the React Native release blog:

Inline Requires is a Metro configuration option that improves startup time by delaying execution of JavaScript modules until they are used, instead of at startup.

While this feature has been available for use for a couple years, it is now enabled by default.

Ready to see the benefits of React Native 0.64 in your app? At Echobind, we are here to support you at any point in the development life cycle, contact us for help upgrading your React Native app.