React: What is a host tree?

In a nutshell

React can be thought of as a UI runtime that outputs a tree that can change overtime. It could be a DOM tree, an iOS hierarchy, a tree of PDF primitives, JSON objects, etc. You usually use these trees to represent some UI (e.g., a web page, mobile app screen, PDF page, JSON object).

It can be thought of as a host tree because the tree exists in the host environment outside of React (e.g., in the DOM or iOS). These trees usually have their own imperative API like Node.appendChild().

One of the main benefits of using React is that you can describe your UI declaratively as a function of state. You write components that can render differently depending on state and React takes care of using the imperative APIs to reconcile the host tree with your React element tree.

Sources

• Reconciliation – React as a UI Runtime