New Shadow Tree: Async Layout Engine

WHY IT EXISTS: In the old architecture, Yoga layout ran on the JavaScript thread. For every state change, React Native had to cross the bridge, calculate layout in JS or synchronously on the main thread, then mount views. Heavy flexbox calculations blocked JS execution and caused dropped frames, especially with large lists or deep nesting. The New Shadow Tree exists to decouple layout from JavaScript execution so UI calculations can happen concurrently without freezing user interactions.

THE MENTAL MODEL: Think of the Shadow Tree as an architectural blueprint drawn in a back office while the construction crew waits. JavaScript sends a description of what should exist, and the Shadow Tree translates that into exact dimensions and positions using Yoga on a dedicated thread. Only after the blueprint is finalized does the native side start building actual platform views. It is not the view hierarchy itself; it is the instruction set that generates it.

HOW IT WORKS: When React commits a change, Fabric sends the component tree to C++ shadow nodes. Each shadow node corresponds to a React component but lives in C++ and carries style and layout information. Yoga runs on the shadow thread to resolve widths, heights, and positions asynchronously. The resulting tree is immutable, meaning updates create new shadow nodes rather than mutating existing ones. Once layout is complete, the mount layer diffs the new shadow tree against the previous one and instructs the host platform to create, update, or delete native views.

WHEN TO USE IT: You do not opt into the Shadow Tree directly; it is the foundation of the New Architecture. You benefit from it automatically when you enable Fabric. It matters most when you have complex flexbox layouts, frequent state updates, or screens where JS thread responsiveness is critical. Understanding it helps when debugging layout thrashing or when writing custom Fabric components that need to expose shadow node properties to JavaScript.

WHEN NOT TO USE IT: If you are on the legacy architecture, the New Shadow Tree is not available. You should not attempt to manually manipulate shadow nodes from JavaScript or assume they are accessible as native view refs. Do not force synchronous layout calls across the boundary unless absolutely necessary, because that defeats the purpose of the async pipeline and can reintroduce the frame drops the architecture was designed to prevent.

ONE CANONICAL EXAMPLE: Imagine a chat screen with hundreds of variable-height messages. In the old architecture, calculating heights for every new message on the JS thread would stall text input and scroll performance. With the New Shadow Tree, each message's layout is computed asynchronously in C++ while the JS thread continues handling user input. The native recycler view receives precise dimensions from the shadow tree and mounts cells without blocking interaction.