Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →React Native turns component output into native platform views through a three-phase pipeline: render → commit → mount. React and the renderer build a host-component tree, calculate its layout, then apply the required changes to Android or iOS views. It does not render a web DOM.
What does React Native’s render pipeline do?
The pipeline describes how React code becomes a visible native interface. The official React Native render-pipeline documentation names three phases: render, commit, and mount. The details below describe the New Architecture; they should not be assumed to apply identically to every React Native release or to apps using the legacy architecture.
As an Amazon Associate I earn from qualifying purchases.
1. Render: React components become a Shadow Tree
A function or class component returns React elements. React resolves composite components—your app’s own components, for example—until it reaches host components such as <View> and <Text>. The renderer creates a Shadow Node for each host component and connects those nodes into the React Shadow Tree. A composite component does not necessarily have its own Shadow Node.
Free tools Windows power users keep installed
One-click scans. No signup required.
The element tree is a temporary representation. The Shadow Tree is the renderer’s representation of host components, used by later phases to calculate layout and update the interface. It is immutable: when props or state change, the renderer builds a new tree rather than editing the existing one in place. Unchanged subtrees can be reused, so an update does not mean every native view must be recreated.
#1 Best Overall
2. Commit: calculate layout and prepare the next tree
During commit, React Native calculates layout and selects the next tree to mount. Yoga calculates Shadow Node sizes and positions from styles and the root’s layout constraints. Most layout work is performed in C++; some components need measurements from the host platform. Text is a notable case because its layout depends on platform text behavior.
When the new tree is ready, it is promoted as the next tree for mounting. The render-pipeline documentation describes this as a distinct phase from creating the tree and applying native-view changes.
Rank #2
3. Mount: apply changes to native views
For mounting, the renderer compares the previously rendered tree with the next tree and produces operations such as creating, updating, or removing views. It then promotes the next tree to the rendered tree and applies those operations to host views. If a nested view’s background color changes, for example, the resulting work can update that view’s color instead of remounting the entire screen.
Host views are real platform objects. A React Native <View> may correspond to an Android ViewGroup or an iOS UIView; text uses appropriate platform text machinery. Layout metrics and content or style information from the renderer inform how those views are positioned and displayed. The React Native glossary describes the platform-view terminology.
Rank #3
Host-view mounting runs on the platform UI thread. The exact mounting implementation differs between Android and iOS, so the three-phase model is more portable than assumptions about platform-specific scheduling.
Which thread runs each phase?
There is no single thread on which the entire pipeline always runs. In the New Architecture, React’s render phase commonly runs on the JavaScript thread, while only the UI thread can manipulate host views. Depending on the scenario, rendering work may happen on the JavaScript thread or synchronously on the UI thread. High-priority UI events can interrupt render work and receive higher priority.
Rank #4
When commit runs in the background, mount is scheduled for the next UI-thread tick. If commit runs on the UI thread, mount can happen synchronously there. Some renderer state updates start on the host platform and bypass React’s render phase; the official example is a ScrollView offset update. For further detail, see React Native’s Threading Model.
Why a React element may not become a native view
View flattening can merge eligible layout-only nodes during diffing, reducing the depth of the host-view hierarchy while preserving visible output. As a result, there is not always a one-to-one relationship between React elements and mounted platform views. The exact result depends on the properties involved; see the official View Flattening explanation.
What the architecture does—and does not—promise
The Fabric renderer is designed to support capabilities including interoperability, multiple update priorities, synchronous events, concurrent React features, and a shared C++ renderer core. These are architectural goals and capabilities, not a guarantee of a particular speedup in an individual app. Actual performance depends on the app and its workload; the architecture overview is also marked as work in progress. Consult the official Fabric renderer overview and Architecture Overview for context. The overview notes that app developers do not need to understand renderer internals to build React Native apps effectively.
Quick Recap
The short version
- Render: React resolves components into host components and the renderer builds a Shadow Tree.
- Commit: Yoga and, where needed, platform measurement calculate layout; the next tree is selected.
- Mount: the renderer diffs trees and applies changes to native host views.
- Across all three: immutable trees enable reuse, thread placement depends on the situation, and view flattening can remove separate host views for eligible layout-only nodes.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
