How does the Fabric architecture work?

Technology CommunityCategory: React NativeHow does the Fabric architecture work?
VietMX Staff asked 3 years ago

In the new Fabric 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 (synced 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.