Part 10 · Best practices

Fabric scheduling: JS, layout and UI are different budgets

Prerequisites: 02-fabric-trees

Common scheduling path

A common path, not the only scheduling path. High-priority work can render on UI. Nodes: JS thread, C++ shadow tree, Commit / layout, UI thread.
A common path, not the only scheduling path. High-priority work can render on UI. [S05] [S06]

Frame diagnosis

Use both JS and platform traces to localize a frame problem. Nodes: Slow frame, JS trace, UI trace, Change one cause.
Use both JS and platform traces to localize a frame problem. [S06] [S14]

Mental model verified

The common path renders on the JS thread, but a high-priority event can lead to synchronous render work on UI. Commit/layout may occur elsewhere, while mount applies host-view mutations on UI. Immutable shadow structures enable thread-safe scheduling.

[S05] [S06]

Worked diagnosis synthesis

A scroll janks even when JS appears mostly idle. Inspect UI-thread work, layout and mount costs, not just React component time. A huge custom native view mutation can still stall the frame.

[S05] [S06] [S14]

Engineering decision synthesis

Budget expensive native view changes; batch related state updates when appropriate and measure on actual devices. Avoid assuming a synchronous JSI call has no scheduling consequences.

[S04] [S05] [S06]

Failure mode and improvement synthesis

A generic “bridge latency” diagnosis misses mount cost. Compare JS trace, renderer work and platform main-thread trace, then optimize the measured segment.

[S05] [S06] [S14]
Keep this: The render pipeline can span threads, but host-view mutation remains a UI-thread operation.
Check yourself: Can Fabric ever do render work on the UI thread?

Yes. The renderer supports high-priority UI-thread scenarios; do not model all work as an invariant JS-only chain.

Sources & further reading

  1. [S04] About the New Architecture

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

    Supports: JSI references, module and renderer interoperability, limits of performance claims.

    Inspect the implementation boundary described by this source.

  2. [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.

  3. [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.

  4. [S14] React Native DevTools

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

    Supports: JS traces, heap snapshots and React profiling; native tools still needed.

    Inspect the implementation boundary described by this source.