Part 2 · Fundamentals

Fabric: three trees and three phases

Prerequisites: Start here / basic technical literacy

Representations and phases

Conceptual render path. Some render or commit work may use other scheduling scenarios. Nodes: React elements, Shadow nodes, Layout + commit, Mount diff, Host views.
Conceptual render path. Some render or commit work may use other scheduling scenarios. [S05] [S06]

State update and sharing

Structural sharing is conceptual; the exact clone set depends on props and layout changes. Nodes: Old tree, Changed leaf, New tree, Unchanged C.
Structural sharing is conceptual; the exact clone set depends on props and layout changes. [S05]

Mental model verified

Render reduces React elements to host components and creates an immutable C++ shadow tree. Commit calculates layout and promotes a next tree. Mount diffs against the rendered tree and applies host-view mutations on the UI thread.

[S05] [S06]

Worked flow verified

A title changes from “Draft” to “Issued”. React updates affected elements; Fabric clones affected shadow nodes, shares unchanged nodes where possible, computes layout as needed and updates the host text view at mount.

[S05]

Engineering decision synthesis

Profile render, layout and mount separately. A React rerender is not synonymous with recreating every native view.

[S05] [S07]

Failure mode and improvement synthesis

Assuming “render completed” means “painted” leads to timing bugs. Use the appropriate layout and view APIs, then verify when the actual host view receives changes.

[S05] [S06]
Keep this: React elements, C++ shadow nodes, and native host views are related representations with different owners.
Check yourself: Is every React composite component also a native UIView or Android View?

No. Host components produce shadow nodes; composite components do not necessarily correspond to host views.

Sources & further reading

  1. [S05] Render, Commit, and Mount

    React Native · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: Shadow trees, layout, diff and host view mounting.

    Inspect the implementation boundary described by this source.

  2. [S06] Threading Model

    React Native · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: JS, UI and render scheduling scenarios.

    Inspect the implementation boundary described by this source.

  3. [S07] Fabric

    React Native · official documentation or maintainer source · accessed 2026-10-09 · current documentation as accessed; examples conceptual

    Supports: C++ renderer architecture and host interoperability.

    Inspect the implementation boundary described by this source.