What’s New in React Native 0.69 — How to Upgrade and Why it Matters
Last week React Native 0.69 was released. It features a number of important updates which, among other things, help to greatly improve performance and memory usage of React Native apps. In this article, I’ll give a short overview of not just what’s new in React Native 0.69 but also why it matters. I’ll also quickly cover how to upgrade.
What’s new: React 18
The latest version of React Native now uses React 18. Because React Native is somewhat coupled to React internals, React Native releases are generally tied to specific versions of React, and often official React Native releases lag behind the latest React version. With the release of version 0.69, React Native is now using the latest and greatest version of React.
Why it matters
Because of the tight coupling between the two, React Native has not always been able to take advantage of the most up-to-date versions of React, sometimes requiring developers to be a version or two behind. This means missing out on important performance and API improvements.
With React Native 0.69, developers can enjoy a number of new React 18 features like enhanced Suspense functionality, Concurrent React, new hooks, a whole slew of bug fixes and performance improvements, and much more. This update is a critical step in making sure React Native is in sync with modern React development.
What’s new: Bundled Hermes
Are you using Hermes yet in your React Native project? Hermes is a JavaScript engine optimized for React Native which performs much better, and with much less memory usage than the default engines on each platform. Like React, Hermes is coupled to the specific version of React Native you’re using. Starting with 0.69, Hermes is bundled alongside React Native which makes it simpler to build, and ensures that you’re using the correct, compatible version of Hermes. Using Hermes is opt-in, so make sure to follow the instructions to enable it in your project.
Why it matters
Hermes is a major step forward in React Native performance and helps with startup time, memory usage and bundle size. Because it’s an entirely different JavaScript engine, there’s always the potential for incompatibilities. But since Hermes has been around quite for a while now, most of the kinks have been worked out. In some cases, you may need to update other project dependencies to ensure compatibility with Hermes.
I’ve enabled it myself on several projects and have been more than happy with the results. You should test your app thoroughly after turning it on, just to make sure everything works as expected, but I highly recommend that you enable it to get the best performance possible out of your React Native app.
What’s new: Rollout of New Architecture
The new architecture describes a set of major, ongoing architectural changes in React Native that enhance performance, flexibility, memory usage and oh, so much more. Adoption of the new architecture is, to this point, opt-in and needs to be enabled manually.
There are three main components to the new architecture worth noting: two which need to be manually enabled in your project, Fabric and TurboModules, and one which runs under the hood to support them: the JSI.
The JSI is a new interoperability layer between JavaScript & native code. Prior to the JSI, messages between JavaScript & native code were sent via asynchronous JSON calls over a “bridge”. The JSI enables native, synchronous communication between JavaScript & native code, eliminating the need for JSON encoding/decoding and asynchronous messaging; and in some cases, reducing memory needs by enabling shared ownership of structures rather than mirroring data on both sides of the bridge. In short: faster & better.
Fabric is a new rendering engine, a replacement for React Native’s “shadow tree”, running directly in C++. The shadow tree is a native representation of the view hierarchy of your React Native app, similar to the shadow DOM for React on the web. It tracks changes to the hierarchy and is used to render native views on screen. Fabric enhances performance, memory usage and stability for this critical piece of React Native functionality.
TurboModules is the name for the new system of interoperability between JavaScript and native modules. React Native achieves native functionality by exposing native APIs via JavaScript. In order to expose these APIs, developers build module wrappers around the native functionality and expose those wrappers via a JavaScript interface. TurboModules makes this module interaction both simpler and more performant using dynamic, type-safe code generation of modules via JavaScript specs, and does all of this via the JSI.
There’s much more to the new architecture than what’s summarized here, so if you want to know all the lurid details, you can take a deep dive on the new architecture here.
Why it matters
In short, the new architecture means better performance, responsiveness, flexibility and memory usage — an all around better experience for both end users and developers.
Switching to the new architecture is not so much an issue of “if”, but an issue of “when”. Though it’s optional for the time being, new React Native development is focused on the new architecture and we can expect that at some point in the future, using the old architecture will be discouraged if not outright impossible.
I would advise you to start trying out the new architecture now. As with Hermes, there is always the potential for incompatibilities or other issues when enabling it, so be sure to test thoroughly.
How to upgrade
Upgrading React Native is sometimes a little bit tricky. The main change is to update the version of React Native and related modules in your package.json file, then run your usual package update commands (usually yarn, pod install, etc) — but that’s usually not enough.
In addition to simply upgrading the React Native libraries, you generally need to make other project and build updates. In order to get the full list of changes you’ll need to apply, check out the React Native upgrade tool. Using this tool, you can select your current version of React Native, and the tool will show you all of the diffs you’ll need to apply to your repo to upgrade.
If you do want to enable the new architecture at this time, be sure to checkout the documentation — simply upgrading to 0.69 will not automatically enable the new architecture. The same goes for Hermes: instructions on how to enable it in your project are found here.
I’ll be honest — I did run into some issues upgrading an app I’m working on. Fortunately, I found a GitHub issue discussing the problem and applied a workaround from the thread to get it working. There’s an open PR to address the issue, but it hasn’t been merged yet, so if you’re squeamish about applying a manual workaround to get it working, you might want to wait for a point release. Personally, I’m holding the upgrade in a separate branch and keeping an eye on the issue for the time being.
Recap: React Native 0.69
React Native 0.69 brings a ton of important improvements & updates to the table, with performance & memory usage being a major theme. Because some of the changes are opt-in, you’ll need to decide yourself which to enable and in what order. No matter which upgrade path or strategy you take, though, these changes bring exciting improvements to the React Native platform. It’s a great time to be a React Native developer!
Jonathan has over 20 years of engineering leadership experience in startups big & small. In his spare time, he’s working on a document automation platform, Imagepipe.co
