Does React Native utilize a 'virtual DOM'?

Question

I'm trying to figure out how React Native works under the hood and something that I'm unsure of is if React Native utilizes the so-called 'virtual DOM' that React uses. I'm assuming that React Native somehow keeps track of changes to the state of the application and then does the least amount of work to get to the new state, i.e reconciliation in React. I understand that there is no real DOM on the mobile side of things and that React Native invokes native API's to render/re-render views, but...

Could one say that React Native also uses a 'virtual DOM', and if not, how would one put it into words?

Answer 1

2022 Update

As React Native has changed a lot in recent times and will change a lot in the near future, I thought it's timely to update this answer:

New components to understand:

Hermes:

React Native team developed their own Javascript Engine in C++, called Hermes. If enabled, Hermes will be shipped with your app as a context for executing Javascript (instead of JSC), promising to make your app's bundle smaller, and your app's execution faster.

JSI (Javascript Interface):

It is a unified, lightweight, general-purpose layer for (theoretically) any JavaScript engine. It's implemented in C++, just as the engine, but decoupled from the engine. This makes it possible to hold references of native objects on the JS thread, eliminating the need for the bridge, thus eliminating the need to stringify everything and making React Native way faster altogether as the stringification is the bottleneck currently. It also makes it easier to switch between JS engines. As JSI is developed in C++, it makes it easier for developers to share native code between Android and iOS. For example, you can develop native code in C++, call it both on iOS and Android from Javascript through the help of JSI. Both platforms can execute C++ code, iOS can use it really easily through Objective C as it is a superset of C. Android needs a bit more work with the help of Android NDK (Native Development Kit) and JNI (Java Native Interface, responsible for Java <=> C++ translation).

Bridge will be split into two parts, read more:

Turbo modules

This is a new way of interacting with the native side, interoperable with JSI. It allows lazy initialization of packages, thus making the startup time of apps having lots of native dependencies way shorter.

Fabric renderer

Re-architecture of the UI manager, that is interoperable with JSI and Turbo modules. Instead of the Shadow Tree (or Shadow Thread) that was formerly used for calculation the layout of elements (it was coupled with the bridge), Fabric makes it possible to use the new powerful JSI features to render the ui without having to stringify anything. This will deliver truly native-like performance.

New answer for the original question:

React Native uses Fabric as a renderer, which lives in the C++ world (UI thread), has a reference to the virtual DOM, that's created by React in C++ and eliminates the need for the shadow thread as objects will be shared between the UI (native) and the JS threads. So once you click a button, React can mutate an object that it has reference to (that holds the virtual DOM), which is shared with the UI thread, that will instantly update in the UI thread, updating the UI of the app.

Answer 2

UI rendering in React

Like the Real DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

So whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation. The difference between the previous Virtual DOM representation and the new one will be calculated. The real DOM will be updated with what has actually changed.

UI rendering in React Native

Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app means React Native uses native API for the rendering of components on mobile. React Native uses a shadow thread that performs layout calculation using YOGA.

In case of any change in the component state, It will calculate the changes in the background using shadow thread then update the UI threads.