The New Architecture

One of the most highlighted novelties of the last year has been the gradual adoption of the new architecture of React Native.

With the goal of improving the performance and responsiveness of the applications, the React Native team has reviewed its architecture and has changed the way native modules and components work. If you want to learn more about why to migrate to the new architecture, you can visit this link: https://reactnative.dev/docs/next/the-new-architecture/why.

The important changes of this new architecture are:

• Turbo Modules, allows efficient and flexible integration with native code.
• Fabric, offers better rendering performance and consistency between platforms.
• Codegen, generates C++ code shared between platforms.

The new architecture maintains the basic concepts of React Native. Native modules are the recommended way to create libraries that leverage platform-specific APIs, while native components are the recommended way to create reusable UI components and provide a native experience to users.

The new architecture is a major advancement because it allows for sharing much of the code between Android and iOS and typically has a very significant impact on performance.

• Turbo Modules

  If you have worked with React Native before, you may be familiar with Native Modules, which allow communication between JavaScript code and native platform code through a bridge

Turbo Modules are the evolution of Native Modules and use JSI (Javascript Interface). JSI is a key element in the new architecture as it makes communication between JavaScript and native platforms simpler and faster, resulting in a significant performance increase compared to the communication through JSON serialization that was previously used.

• Fabric

  This is a new rendering system for React Native designed to provide better user experiences that were not possible with the previous architecture. Thanks to the addition of a concurrent rendering engine and JSI, Fabric allows:

• Improved performance and faster startup.

• Less data serialization between JS and native code.

• Core C++ shared between platforms.

• Concurrent Render API

  React 18 includes the much-anticipated concurrent renderer, a mechanism that allows it to prepare multiple versions of the user interface at the same time. In addition, the rendering process becomes asynchronous and can be interrupted, which allows developers to provide a smoother user experience.

In previous versions of React Native, this was not possible because the old architecture was based on mutating native trees, which did not allow React to prepare multiple versions of the tree at the same time.

To make use of the new concurrent rendering API, it is necessary to update the code, so it is expected that libraries and frameworks will be the first to adopt these improvements.

• Automatic batching

  Automatic batch processing allows React to process multiple state changes in a single rendering, improving performance.

setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 1000);

For example, in the following sample code, which updates two states within a setTimeout, in versions prior to React 18 two separate renderings would have been performed. However, with the new version, React is able to group the updates and reduce the number of renderings. This feature is transparent to the developer, as no code changes are required.

• Transitions

  Transitions are a new concept in React that allows developers to mark certain changes as non-urgent. This means that these changes can be interrupted by priority actions, such as typing in a text field or clicking a button.

To mark state updates as non-urgent, developers can wrap them with the new startTransition method as in the following example:

setInputValue(input);

startTransition(() => {
  setSearchQuery(input);
});

Hermes

Expo has included Hermes by default in its latest update, an optimized engine for React Native that improves startup time, reduces memory usage, and reduces app size compared to JavaScriptCore.

Hermes uses an ahead-of-time (AOT) compilation approach, which means that the heavy work of the JavaScript engine is done at compile time, rather than during execution. This improves the app's load time and reduces memory usage. In addition, Hermes implements a garbage collection system to regulate memory usage, and the size of the app on Android devices is reduced by an average of 30%. Although it is experimental, its use is transparent to React Native users and is compatible with the Chrome debugger.

In summary, the latest update of Expo brings significant improvements in terms of performance and ease of development.
These changes are fundamental to Expo, and we hope that developers will gradually adopt these innovations to create even better applications.

Encourage yourself to try Expo and keep reading our blog to stay up to date on the latest news and improvements!