- The React Native team has announced that the new architecture will be rolled out in 2022.
- This piece (of writing) aims to understand the most important updates brought by the new architecture.
Before we get to the new architecture, let’s recap how the current architecture works.
The current execution of react native apps happens over three threads:
- JS Bundle: Responsible for executions of JS Bundle by using JS Engine.
- Native UI: Responsible for running the native modules to handle functions like UI rendering and user events etc.
- Shadow: Responsible for calculating all the positions and layouts for an element and transforming it into the native element.
Presently the communication between JS Bundle and Native Threads is persisted with an object called a bridge. When delivering data through the bridge it has to be optimized as JSON. This bridge can only handle asynchronous transmissions.
- Currently, render requests or any data is sent over React Native bridge which is using JSON for communication with data.
- Even though JSI will be used mostly by library developers, the app developers will benefit from the JSI when we need it.
- With the power of C++, React Native can target a big number of systems like smart Watches, TVs, etc.
Fabric is React Native’s new rendering system, conceptual evolution of the legacy render system. React Native world is taking a new approach to how to render UI elements.
Currently, React Native rendering happens in the below order in general:-
- React -> React Shadow Tree -> Bridge -> Native UI
When Fabric is released rendering order will be like the below in general:-
- React -> Native -> Shadow Tree (C++) -> Native UI
What are the benefits of Fabric?
- Fabric will move the Shadow Tree mechanism which helps renderers to render the only changed sections of our app to the native realm by using C++. To be able to do that fabric will benefit from the concurrent rendering mechanism of React 17 and above.
- With the support of multi-priority and synchronous events, the renderer can prioritize certain user interactions to ensure they are handled in a timely manner.
- With the support of multi-priority and synchronous events.
- Easier to implement server-side rendering for React Native.
- Consistency of the new render system is cross-platform, it is easier to keep consistency among different platforms.
Turbo Modules are basically an enhancement over these old Native modules.
At the runtime of the application, the Turbo Models open a bridge that will later allow the JS code to initialize any module at its first use, The modules thus created will have the same structure as any other module. Turbo Modules enable us to load and initialize native modules only when they are needed.
If we combine all the updates, the new architecture will look like this.
- The bridge will be replaced with JSI.
- Time-sensitive tasks can be executed synchronously.
- Lazy loading of turbo modules.
This new structure will give React Native some powerful improvements.