This document refers to the architecture of the new renderer, Fabric, that is in active roll-out.
Here we define the threading model and provide some examples to illustrate thread usage of the render pipeline.
React Native renderer is designed to be thread safe. At a high level thread safety is guaranteed by using immutable data structures in the internals of the framework (enforced by C++ “const correctness” feature). This means that every update in React creates or clones new objects in the renderer instead of updating data structures. This allows the framework to expose thread safe and synchronous APIs to React.
The renderer uses three different threads:
Let’s review the supported scenarios of execution for each phase:
When there is a high priority event on the UI Thread, the renderer is able to execute all the render pipeline synchronously on the UI thread.
This scenario shows the interruption of the render phase by a low priority event in the UI thread. React and the React Native renderer are able to interrupt the render phase and merge its state with a low priority event that is executed on the UI thread. In this case the render process continues executing in the background thread.
The render phase is interruptible. This scenario shows the interruption of the render phase by a high priority event in the UI thread. React and the renderer are able to interrupt the render phase and merge its state with a high priority event that was executed on the UI thread. The render phase executes synchronously on the UI thread.
Update originating on UI thread and skips rendering phase. See React Native Renderer State Updates for more details.
© 2022 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.