React Under The Hood

This file contains notes summarizing the article "React as a UI runtime" by Dan Abramov.

Central concepts

React renders a tree of nodes. The kind of tree depends on the host environment
Kinds of trees: web/DOM nodes, iOS/iOS hierarchy

Reconciliation

Nodes in the host tree are totally mutable. Nodes are meant to be created and destroyed. Working with raw DOM APIs in Javascript to create, update properties, insert, and delete DOM nodes forces the entire DOM to be recalculated and repainted. As a result, nodes can lose their state (such as focus, blur, active, etc.) React leverages DOM APIs in order to describe the kind of DOM nodes we'd like to render. Each unit is called a React Node. When we perform a change to a React Node, React performs a process of reconciliation between the rendered host tree and the React Node changes that need to be made. The process can be described:

as recursively diffing React node elements
removing React Nodes that no longer represent the view of the next component lifecycle
leaving a React Node in its place in the tree. If necessary, updating the styles, properties, and attributes of an element. Note of interest about the Reconciliation: rendering lists
A re-ordering of a collection of React Nodes (which may often happen) will cause the Reconciliation process to re-render the elements. The reason for this is because the React Nodes' places within the collection are re-ordered and no longer map to the view of the initially rendered tree.
To solve this issue found when reconciling collections: React uses key identifiers for each node (that we must specify) when rendering a list. Instead of diffing nodes in their place, nodes are diffed by recursive level in the tree and then by key, instead of specific order.

Rendering

Elements in React describe the tree. An element is a plain object describing a component instance or DOM node with its desired properties. Given this information, a question we might ask is 'How does React render a component that is a function that may render other components and functions?' In other words, how does React render a nested tree like the following:

<App>
  <div>
    <nav>
      <ul>
        <li/>
        .
        .
        .
        many elements more
        .
        .
        .
</App>

Answer: the process of rendering components is recursive. Elements in React can be functions. When elements are functions, React calls our component instance and recursively renders what the component returns. As Dan Abramov writes in their article about the recursive process of rendering and reconciliation "This is why we say reconciliation is recursive. When React walks the element tree, it might meet an element whose type is a component. It will call it and keep descending down the tree of returned React elements. Eventually, we’ll run out of components, and React will know what to change in the host tree."

Inversion of control

How does React allow for local state? Render props Why don't we call a component directly, like Form(), as opposed to how we normally call a component <Form />?

Lazy Evaluation
- One of the benefits of letting React take control of rendering is lazy evalation.
- arguments are evaluated before the function call
- if React called elements as functions, they would execute immediately regardless of whether the function wants to render a component or not.

State

React updates an element based on conceptual position in the tree. This allows nodes to maintain local state: focus, selection, input etc. React destroys elements and their local state when their conceptual position is changed or we want to render something conceptually different.

React model v. reactivity system https://overreacted.io/react-as-a-ui-runtime/