Welcome to 2023!
We're starting off this year with a review of the most significant updates in mobile development with Expo over the past year.
Expo recently released an update to their SDK, which includes much-anticipated changes.
In this article, we'll examine how the new React Native architecture and the latest Expo updates can improve the performance of mobile applications.
We also published Mobile development with Expo II - Faster Development.
If you're looking to improve your mobile development process, we recommend reading this article to learn more about how Expo can help you in this regard.
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.
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.
The latest version of Expo allows the use of React 18, whose main features are:
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 batch processing allows React to process multiple state changes in a single rendering, improving performance.
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 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:
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!