Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
React Native turns component output into a platform-native interface through three stages: render, commit, and mount. React and the renderer build a tree, calculate layout, then apply targeted changes to native views. The final screen is not a web page or a DOM painted by a browser.
How React Native gets from components to pixels
The New Architecture documentation describes the renderer pipeline as render → commit → mount. That is the most useful mental model for understanding how a state or prop change reaches the device screen.
- Render: React evaluates components and the renderer builds its internal representation of host components.
- Commit: The renderer calculates layout and selects the next tree to display.
- Mount: The renderer applies the changes to platform-native host views.
The detailed threading and pipeline behavior below applies to the New Architecture. React Native describes that architecture as being in active roll-out; check the documentation for the version and architecture used by a particular app. The architecture overview is marked as work in progress and notes that app developers do not need to understand these internals to build apps effectively.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →What happens during render?
A function or class component returns React elements. React recursively evaluates composite components—such as an app-defined MyComponent—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 is part of the React element tree, but does not necessarily have its own Shadow Node.
#1 Best Overall
The element tree is a temporary representation. The Shadow Tree is the renderer-side structure used by later stages. It is immutable: when props or state change, React and the renderer create a new version instead of changing the existing tree in place. Unchanged subtrees can be shared between versions, so a change does not mean the entire native interface must be rebuilt. The React Native render-pipeline documentation describes this process.
How does commit calculate layout?
During commit, Yoga calculates the positions and dimensions of Shadow Nodes using their styles and the root’s layout constraints. Most of this layout work runs in C++. Some components need measurements from the host platform; text is a notable example because text layout depends on platform-specific behavior. Once the work is ready, the new tree is promoted as the next tree to mount.
Rank #2
Layout is therefore not simply a matter of copying a component’s style values onto a view. The renderer resolves the tree’s geometry under the available constraints, while platform measurement can contribute where needed. The pipeline page explains commit and layout in more detail: Render, Commit, and Mount.
What happens during mount?
Mount 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. This is why a small change can lead to a small update rather than a wholesale remount. In the official example, changing a nested view’s background color updates that view’s color.
Rank #3
Host views are native platform objects. A React Native <View> can correspond to an Android ViewGroup or an iOS UIView; <Text> uses the platform’s appropriate text machinery. The renderer supplies view properties and layout metrics. The React Native glossary defines these renderer terms.
Mounting host views runs on the platform UI thread. The details of how mounting is implemented differ between Android and iOS, but the central distinction remains: React elements and Shadow Nodes are renderer structures; host views are the objects that make up the platform interface.
Rank #4
Which threads run the work?
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 can run on the JS thread or synchronously on the UI thread. High-priority UI events can interrupt render work and receive higher priority.
For a common background-commit case, 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 skip React’s render phase; the documented example is ScrollView offset state. These are scenario-dependent details, not a promise that every update follows the same schedule. See the official Threading Model.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Why might a React element not create a native view?
View flattening can merge eligible layout-only nodes while the renderer diffs trees. This reduces the depth of the host-view hierarchy while preserving the intended visible output. As a result, one React element does not guarantee one distinct native view in the final mounted interface. The optimization depends on relevant properties and eligibility, rather than applying indiscriminately to every node. Details are in View Flattening.
What the New Architecture changes—and what it does not prove
Fabric is the renderer associated with React Native’s New Architecture. Its documented design includes a shared C++ renderer core, interoperability, multi-priority and synchronous events, and support for concurrent React features. These are architectural capabilities and motivations, not measured guarantees of faster performance in an individual app. The official Fabric renderer overview describes them.
For the same reason, the pipeline alone cannot identify why a particular screen is slow. It explains how updates are represented, laid out, and mounted; it does not provide an app-specific benchmark or a universal performance result. Avoid assuming that a smaller diff, view flattening, or a particular thread schedule necessarily produces a measurable improvement in every workload.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The practical mental model
- Render turns component output into a renderer tree of host-component Shadow Nodes.
- Commit calculates layout with Yoga and promotes the next tree.
- Mount diffs trees and applies changes to native platform views.
- Immutable trees allow reuse of unchanged subtrees; small changes can produce targeted view updates.
- Thread placement varies with priority and scenario, while host-view manipulation belongs to the UI thread.
For React’s own render-and-commit concepts, see the React documentation.
Quick Recap
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.
