Current React Native Architecture
How the different operations are carried out in React Native?
There are basically 3 threads in which takes care of all the operations
Problem with this Architecture?
So even for a small interaction, it has to traverse all the threads which are in fact not bad but performance wise or especially frames are dropped as the responses cannot be kept synced with the main thread unless these are really synched operations.
It may seem like a small problem but this small problem gives rise to a whole lot more problems e.g Input text interactions are stuttery, animation frames are dropped, long lists are rendered with delays, lag during drag and drop inside the app and a lot more…
Fabric is the new React Native architecture proposed by the community to make the mobile application user experience close or even better than the native apps. Just like Fiber architecture in ReactJS has greatly improved the diffing and overall performance, Fabric is to be put in the same direction to improve the performance and efficiency of the app.
There are basically three main principles of Fabric -
Prioritizing the Tasks
Immutable Shadow Tree
As any thread can request a change so this becomes very important for us to have a consistent data or DOM hierarchy. To achieve this, the shadow tree must be immutable. With this, it won’t matter where the changes are coming from as long as our tree is consistent with all other thread that it is being shared with. This is a very important concept which would ensure that there would not be any deadlock condition independent of a synchronous or asynchronous request.
Reducing Memory Consumption
domNode only keeps a reference to this native object.
How does this new Architecture work?
In the new architecture, there are still three threads but designed in a way to make them as performant and efficient as possible. The first main concept that is used is, now the tasks are divided into sync and async instead of only async. It enables us to perform the important UI operations first and in sync with the frame rate of the mobile screen. In this way, absolute no frame is dropped as the tasks are executed in sync with the user interactions (high priority). Also as any thread can bring out the changes in the Shadow thread (synched with the main thread for priority tasks), it would have to be made immutable to have the consistency and avoid deadlocks.
The other important concept which would greatly reduce the memory consumption is using references instead of a whole new copy of the DOM nodes. This is very helpful in having consistent and efficient DOM nodes. Also with the reference, we can perform any operation that we would have done with its copy but in a much quicker way.
React Native Fabric architecture is a huge step forward towards innovating the mobile app platforms. Fabric is based on dividing the tasks into sync and async tasks which would be handled by the immutable shadow thread followed by the memory refinements. This architecture makes a lot of sense if we think natively and can truly help us match up with the native applications. I am very excited to see these changes.