React Native's upcoming re‑architecture
Read the 2018 article announcing the new React Native architecture
Current React Native structure
To better understand the need for implementing an improved React Native architecture, let’s briefly focus on the current one.
React Native is single-threaded, which means when one component is rendering, others have to wait in line. This can cause significant performance issues. Paired with that, the obvious thing that presents itself as a problem is the fact that at this moment everything in React Native is done asynchronously.
In contrast to that, native apps written in platform-specific languages perform all their operations synchronously, which has proven to benefit the app performance and undeniably makes the apps run much smoother.
- • The Main thread is the one our React Native application runs on and it is also called the UI thread because only this thread can make changes to the UI
Downsides of the current architecture
Despite the ever growing React Native community and the fact that it’s being used in many powerful apps, there are still many faults in the current architecture which could greatly use restructuring.
- • having a serializable bridge brings unnecessary copying instead of sharing memory between the threads
- • since everything runs asynchronously, there is no guarantee that the data will get to the other side or on time
- • larger data transfer could be immensely slow
- • updating the UI asynchronously could cause page jumps once the data is loaded after processing the request or waiting in line to execute
- • features from native modules which need synchronous data access cannot be entirely exploited
The new structure differs from the current one in more ways than one, as can be seen below.
Where is the Bridge?
The first glance at the new architecture gives us the question about what happened to the Bridge.
Since the Bridge brings unnecessary problems such as uncertainty whether the data was sent and/or significant delays, it is not confusing why the new React Native is completely getting rid of the Bridge.
About new components
Seeing terms like Fabric, Codegen, JSI and Turbomodules brings forward many questions about this new structure. Let’s explain them one by one.
The entire new React Native architecture is often wrongly called by the name Fabric. In reality, Fabric represents only one part of the whole structure, more specifically the UI layer.
First of all, Fabric allows creating the Shadow tree directly in C++ with the help of UIManager, thus improving UI responsiveness by eliminating the need to jump across threads.
Turbomodules are basically the old Native modules, but implemented and behaving differently.
Codegen will define interface elements used by Turbomodules and Fabric. All of this is expected to remove the necessity to duplicate code and enable sending data without uncertainty and much faster because there is no need to validate the data every time.
Another aspect of the React Native re-architecture is Lean Core. It is fundamentally a React Native repository change already in progress. The goal is to reduce the weight of the generated app and make the library lighter. It is also supposed to help the community resolve pull requests faster.
How long until it’s open source?
After being announced in 2018, there have been many speculations about when the new React Native architecture is going to be finished and ready. Some have even wrongly speculated the dates and expected it to see the light of day last year or even the year before that.
What we can say for sure is that the new architecture is now closer than ever, seeing as the new Fabric renderer, along with other components implemented in the new architecture, is already used in the Facebook app on more than 1K screens which use React Native (see the official tweet from the React Native team)
In the relatively near future it is going to be available to everyone as open source software, seeing as it’s currently being documented for easier use.
A quick recap
The new React Native structure is bringing forward efficient solutions for the previously mentioned problems in the current React Native version.
- • completely removed Bridge
- • swapping JSC effortlessly with other engines
- • complete interoperability between all threads
- • creating Shadow tree directly in C++
- • time-sensitive tasks such as user interaction with the app can be executed synchronously
- • lazy-loaded Native modules
After analyzing all of the features of the new React Native architecture mentioned in this post, all we can say is that this new structure is definitely going to give React Native some powerful improvements.
We can’t wait to see how it all works out and to try it ourselves!