But before that, let’s find out more about Hermes Engine and the new updates in React Native 0.70 version.
What is hermes engine?
For Facebook-centric apps, created using React Native, Facebook created Hermes Engine to make the apps faster, leaner, and performance-centric.
Hermes engine becomes default for all react native apps
Along with Hermes Engine, React Native 0.70.0 version also included several critical updates such as:
- New unified configuration for Codegen
- Full CMake support for Android
- Revamped documentation for New Architecture
- Android Auto-linking for New Architecture libraries
- And more
How does hermes engine make react native apps faster?
With Hermes Engine, this changes, because it uses ahead-of-time compilation (AOT).
Hermes engine impacts these three factors
With Hermes Engine, Facebook has directly impacted three critical aspects related to mobile app performance:
Time to interactive or TTI
TTI or Time To Interactive is the time needed for any app to run user functionalities (typing etc) and interface by loading and supporting the backend processes and screens.
Since Hermes Engine doesn’t run a JIT Compiler, the overall TTI of React Native mobile applications is faster and swifter.
While the Android ecosystem uses APK file format for bundling the mobile app files, Apple uses a format called IPA.
Hermes Engine can significantly reduce the overall application size since Hermes’s native code size is smaller, and it makes the application turbocharged for performance and download.
Hermes Engine deployed a highly advanced process called the Garbage Collector system, which regulates the memory usage of the application. Due to this, the React Native mobile application for both Android and Apple platforms used only those memory chunks, which are actually needed for the smooth running of the app.
Thanks to Hermes System, the React Native applications now consume less memory, thereby giving a stellar user experience even with low-capacity smartphones.(Android Benchmarking Data on a Samsung Galaxy S20) (iOS Benchmarking Data on iPhone 12 Pro)
Garbage collector system explained
To understand why Hermes Engine can drastically improve memory usage, and make the React Native applications faster, we will need to understand the top features of the Garbage Collector System:
- On-demand Allocation of Memory: With Garbage Collector System, the mobile apps built on React Native only utilize memory that is needed, in run-time. Hence, low-configuration smartphones can also give a powerful user experience.
- Noncontiguous: With Hermes Engine, the Virtual Address space need not be in a single-memory range, which makes even 32-bit devices capable of running React Native applications super fast, and seamlessly.
- Movement: The ability to move objects in run-time translates to memory being defragmented, and this helps in memory management by returning the bigger chunks of memories back to the operating system in run-time.
How to update older react native apps with hermes system?
All mobile applications created with React Native 0.70.0 version will automatically have Hermes Engine as default. However, for older React Native versions (starting from version 0.60.4 for Android builds and version 0.64.0 for iOS), Hermes Engine was shipped, but it’s not the default engine.
A little bit of customizations and coding is required in such older versions of React Native apps to ensure that Hermes Engine is used and that there is no ‘dependency mismatch’.
For Android app, we need to edit the android/app/build.gradle file:
And for iOS apps, we need to edit ios/Podfile file:
For iOS apps, we need to install Hermes pods, after editing the settings, and then run this command:
Ongoing work related to hermes engine
As officially announced by Meta, their developers are right now working on these developments, related to Hermes Engine in React Native platform:
- Developers can now run sampling profiler directly from Chrome devtools UI, which will save their time and resources, and give instant outputs
- Suport for “BigInt” will be rolled out soon, as it was demanded by the developers, who were not able to use Hermes Engine, because it cannot be polyfilled.
- Support for “WeakRef”, which is also a long-standing demand by developers. With the support for WeakRef, developers can leverage new memory management controls via Hermes Engine, to make the application faster, and seamless.
If you wish to develop and launch React Native mobile applications, which can fully leverage the power of Hermes Engine, and provide a seamless and delightful user experience, then look no further!
Our experienced and seasoned team of React Native Engineers at TechAhead can understand your inherent requirements, and suggest the best possible solution which will ensure that your mobile application is powerful, fast, robust, and scalable.
Connect with our mobile app engineers and take the first step towards launching React Native mobile apps, that delight your users.