Fabric Renderer

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt

Use this file to discover all available pages before exploring further.

​

Core Concepts

​

Shadow Tree

​

Shadow Nodes

class ShadowNode : public Sealable, 
                   public DebugStringConvertible, 
                   public jsi::NativeState {
 public:
  // Core shadow node data
  std::shared_ptr<const ShadowNodeFamily> family_;
  std::shared_ptr<const Props> props_;
  std::shared_ptr<const EventEmitter> eventEmitter_;
  std::shared_ptr<const State> state_;
  std::shared_ptr<const std::vector<std::shared_ptr<const ShadowNode>>> children_;
};

• Immutability - Once created, shadow nodes never change; mutations create new nodes
• Structural sharing - Unchanged subtrees are shared between versions
• Layout cache - Yoga layout results are cached on nodes
• Type safety - Strongly typed props specific to each component type

​

Shadow Node Family

• Maintains component identity through re-renders
• Enables React’s reconciliation across shadow tree updates
• Links shadow nodes to their JavaScript component instances

​

Component Descriptors

• Creates shadow nodes with the correct concrete type
• Parses and creates typed Props objects
• Manages component-specific State
• Handles event emission

​

Props

// Example: ViewProps.h
struct ViewProps : public AccessibilityProps {
  Float opacity{1.0};
  Color backgroundColor{};
  BorderMetrics borderMetrics{};
  YGStyle yogaStyle{};
  Transform transform{};
  // ... many more properties
};

• Strongly typed - Each component has its own Props struct
• Codegen-generated - For custom components, Codegen creates Props definitions
• Efficient - Only changed props are serialized across the JSI boundary
• Platform-specific - Can include platform-specific properties

​

State

template <typename DataT>
class ConcreteState final : public State {
 public:
  using Shared = std::shared_ptr<const ConcreteState>;
  using Data = DataT;
};

• Image loading state - Track image load progress
• Text layout - Cache measured text dimensions
• Scroll position - Native scroll state
• Native animations - Animation progress

​

Event Emitters

class EventEmitter {
public:
  void dispatchEvent(
    std::string eventName,
    folly::dynamic &&payload,
    EventPriority priority = EventPriority::AsynchronousBatched
  ) const;
};

• Discrete - High priority events like press, focus (sync to next frame)
• Continuous - Scroll, drag, mouse move (batched and throttled)
• AsynchronousBatched - Default, batched with event loop

​

Rendering Pipeline

​

1. Render Phase

React Component Tree
        ↓
   React Renders
        ↓
Calls to UIManager (via JSI)
        ↓
Creates/Clones Shadow Nodes
        ↓
   New Shadow Tree

• createNode() - Create new shadow nodes
• cloneNode() - Clone nodes with updated props
• appendChild() - Build tree structure
• completeRoot() - Commit the tree

​

2. Commit Phase

New Shadow Tree (from React)
        ↓
  Commit Hooks (pre-commit)
        ↓
  Layout Calculation (Yoga)
        ↓
  Commit Hooks (post-commit)
        ↓
  Tree Diffing
        ↓
 Mounting Transaction

​

Layout Calculation

• Runs on any thread (typically background)
• Cached results reused for unchanged subtrees
• Supports measure functions for text and images
• Returns pixel-perfect layouts

​

Commit Hooks

• Pre-commit hooks - Modify tree before layout (e.g., Animation Backend)
• Post-commit hooks - Process results after layout

​

Diffing

• Generates minimal set of mutations
• Handles insertions, deletions, updates, reordering
• Optimized for common patterns (append, prepend)
• Output is a MountingTransaction

​

3. Mount Phase

Mounting Transaction
        ↓
  Mount Hooks (pre-mount)
        ↓
 Apply Mutations to Views
   (Create, Update, Delete)
        ↓
  Mount Hooks (post-mount)
        ↓
  Views Visible to User

class MountingCoordinator {
public:
  MountingTransaction pullTransaction() const;
};

• iOS - RCTMountingManager applies mutations to UIViews
• Android - MountingManager applies mutations to Android Views

​

UIManager

class UIManager final : public ShadowTreeDelegate {
public:
  UIManager(const RuntimeExecutor &runtimeExecutor,
            std::shared_ptr<const ContextContainer> contextContainer);
  
  // Shadow tree management
  void startSurface(ShadowTree::Unique &&shadowTree, ...);
  ShadowTree::Unique stopSurface(SurfaceId surfaceId);
  
  // Node operations (called from JavaScript)
  std::shared_ptr<ShadowNode> createNode(Tag tag, ...);
  std::shared_ptr<ShadowNode> cloneNode(const ShadowNode &shadowNode, ...);
  void appendChild(const ShadowNode &parent, const ShadowNode &child);
  
  // Commit coordination
  void shadowTreeWillCommit(...);
  void shadowTreeDidFinishTransaction(...);
};

• Manages multiple shadow trees (one per React root/surface)
• Coordinates commits across shadow trees
• Applies mutations via delegates
• Integrates with animation backend
• Manages component descriptor registry

​

Surface Management

• Has its own ShadowTree
• Has a unique SurfaceId
• Can be mounted/unmounted independently
• Supports different display modes (visible, suspended, hidden)

void UIManager::startSurface(
  ShadowTree::Unique &&shadowTree,
  const std::string &moduleName,
  const folly::dynamic &props,
  DisplayMode displayMode
);

• Native navigation with React screens
• Modal overlays
• Native UI with embedded React content

​

Synchronous Layout

// JavaScript can measure layout synchronously!
const node = ref.current;
const {width, height} = node.measureLayout();
// Use dimensions immediately, no callback needed

• Layout is calculated in C++, accessible to JavaScript via JSI
• No asynchronous bridge round-trip
• Cached results returned instantly

• Positioning tooltips and popovers
• Measuring text before render
• Implementing custom layouts
• Avoiding layout flicker

​

Runtime Shadow Node Reference Updates (RSNRU)

• Better layout cache hits - React reuses computed layouts
• Fresh native state - State updates visible to React
• Fewer re-layouts - Avoids redundant layout calculations

1. Shadow nodes can be cloned by native operations (layout, state updates)
2. When cloned, RSNRU updates wrapper objects held by React
3. React’s next render uses the latest revision
4. Layout cache and state remain fresh

​

Concurrent React Support

​

Priority-Based Rendering

• Synchronous - User input, critical updates
• Default - Most state updates
• Idle - Analytics, logging

void RuntimeScheduler::scheduleTask(
  SchedulerPriority priority,
  jsi::Function callback
);

​

Interruptible Rendering

• Start rendering a low-priority update
• High-priority event occurs (user input)
• Pause low-priority work
• Process high-priority update immediately
• Resume or discard low-priority work

​

Time Slicing

• Render for 5ms
• Yield to handle input
• Resume rendering
• Prevents blocking user interactions

​

Platform Integration

​

iOS (Objective-C++)

// RCTFabricSurface.mm
@interface RCTFabricSurface : UIView
- (instancetype)initWithSurfacePresenter:(RCTSurfacePresenter *)surfacePresenter
                              moduleName:(NSString *)moduleName
                       initialProperties:(NSDictionary *)initialProperties;
@end

• RCTSurfacePresenter - Manages surfaces and mounting
• RCTMountingManager - Applies mutations to UIViews
• RCTScheduler - Coordinates React renders
• RCTComponentViewRegistry - Maps tags to UIViews

​

Android (JNI/C++)

// FabricUIManager.java
public class FabricUIManager implements UIManager {
  private native void registerBinding(long jsContext);
  private native void startSurface(int surfaceId, String moduleName, ...);
  // ... native methods
}

• FabricUIManager - Java interface to C++ UIManager
• MountingManager - Applies mutations to Android Views
• ReactInstanceManager - Manages React instances
• ViewManagerRegistry - Component view managers

​

Performance Characteristics

​

Startup Performance

• Faster initialization - C++ components initialized once
• Lazy mounting - Views created only when needed
• Shared layout engine - Yoga shared across components

​

Runtime Performance

• Synchronous operations - No bridge serialization delays
• Efficient diffing - Minimal mutation sets
• Layout cache - Computed layouts reused extensively
• Priority scheduling - Important updates processed first

​

Memory Usage

• Structural sharing - Unchanged subtrees shared
• Copy-on-write - Only changed nodes allocated
• Smart pointers - Automatic memory management

​

Debugging Fabric

​

Enable Fabric Logs

// AppDelegate.mm
RCTSetLogThreshold(RCTLogLevelInfo);

// MainApplication.java
ReactNativeFeatureFlags.useFabricInterop(true);

​

Inspector Integration

• Inspect shadow tree structure
• View props and state
• Measure layout
• Track renders and commits

​

Performance Profiling

• Xcode Instruments - Time Profiler, Allocations
• Android Studio Profiler - CPU, Memory, Frame rendering
• React DevTools Profiler - Component render times

​

Migration from Legacy Renderer

​

Enabling Fabric

use_react_native!(
  :path => config[:reactNativePath],
  :fabric_enabled => true
)

newArchEnabled=true

​

Component Compatibility

• Component descriptors - Define in C++
• Codegen specs - TypeScript/Flow component spec
• View managers - Update for Fabric APIs

​

Breaking Changes

• setNativeProps removed - Use state updates instead
• findNodeHandle deprecated - Use refs directly
• UIManager methods changed - Some APIs removed or modified
• Timing differences - Synchronous operations may change timing

​

Best Practices

​

Optimize Re-renders

// Good: Stable props
<View style={styles.container}>

// Bad: New object every render
<View style={{flex: 1}}>

​

Use React.memo

const MyComponent = React.memo(({data}) => {
  return <View>...</View>;
});

​

Batch State Updates

// These create a single commit
setState1(value1);
setState2(value2);
setState3(value3);

​

Avoid Layout Thrashing

// Bad: Read-write-read-write
const h1 = ref1.measureLayout().height;
setHeight1(h1);
const h2 = ref2.measureLayout().height;
setHeight2(h2);

// Good: Batch reads, then writes
const h1 = ref1.measureLayout().height;
const h2 = ref2.measureLayout().height;
setHeight1(h1);
setHeight2(h2);

​

Further Reading