Hiprup

What is the Virtual DOM in React, and how does React Native adapt this concept without a DOM?

The Virtual DOM in React-on-the-web is an in-memory representation of the DOM that React diffs against to compute minimal updates to the real DOM. React Native borrows the concept but not the implementation — there is no DOM on mobile.

How it carries over to React Native:

  • React maintains an in-memory component tree (the React tree) and computes a diff on each render.

  • Instead of producing DOM mutations, RN emits native view operations — create view, set prop, remove view.

  • Those operations cross over to native via the shadow tree (managed by Fabric in the New Architecture).

The shadow tree (where layout happens):

  • A C++ mirror of the React tree, used by Yoga to compute Flexbox layout off the main thread.

  • In Fabric, the shadow tree is immutable — every change produces a new tree, enabling concurrent rendering.

Why this matters:

  • You can reason about React Native UI declaratively just like web React.

  • The reconciliation algorithm (keys, Fiber, batched updates) works the same way.

  • Performance heuristics from web React (stable keys, memoization, avoiding inline objects) carry over directly.

Be precise: 'React Native has no DOM. There is no Virtual DOM in the literal sense — there's a virtual representation of the component tree that React diffs against the previous render and converts to native view operations.' The concept (cheap in-memory diff before expensive real-world mutation) carries over; the implementation is different. In Fabric, the shadow tree is built in C++.

What is the Virtual DOM in React, and how does React Native adapt this concept without a DOM? | Hiprup