In this lesson, you will learn how the rendering architecture of React Native differs from standard React DOM, and how these two worlds are converging.
The DOM vs. The Shadow Tree
When you build a standard web application with React, your components map directly to HTML elements like <div>, <span>, or <h1>. These are nodes in the Document Object Model (DOM). Your browser’s engine parses these, calculates their styles, and paints them onto the screen.
React Native, however, does not use HTML. Instead, it uses a Shadow Tree. When you write <View> or <Text> in React Native, you aren't creating DOM nodes; you are sending instructions to the native side (via the Fabric renderer) to create UIView objects on iOS or android.view objects on Android.
The Architectural Divide
The fundamental difference lies in the Rendering Pipeline:
- React DOM: React maintains a virtual representation of the DOM. When state changes, it reconciles this with the actual browser DOM. The browser is responsible for the final layout and paint.
- React Native: React maintains a virtual representation of the Shadow Tree. When state changes, Fabric calculates the layout (using the Yoga engine) and sends "instructions" to the native host platform to update the corresponding native views.
The Future Convergence
"The Future of React Native Web" is about blurring these lines. Historically, React Native for Web used a compatibility layer to map React Native components to HTML div tags. But the future points toward a unified architecture where the Fabric renderer can potentially target the web just as easily as it targets native mobile.
Imagine using the same optimized Shadow Tree logic—the same layout engine that powers your mobile app—to drive your web interface. Instead of the browser interpreting standard CSS for your web components, it would be fed the same layout primitives that keep your native apps running at 60fps.
// React DOM
return <div>Hello World</div>; // Directly creates a DOM node
// React Native
return <View><Text>Hello World</Text></View>; // Creates nodes in the Shadow Tree
Key Takeaway: While React DOM translates components into browser-native HTML elements, React Native translates them into a platform-agnostic Shadow Tree, and the future of the web lies in bringing that high-performance, predictable layout architecture directly into the browser.