React Internals (Part 1) - The Basic Concepts and the Prerequisites

This article is a prerequisite to understand more advanced concepts in React. I recommend that you read this before you get into more advanced stuff

If you have ever used React, you will hear the words Virtual DOM thrown around a lot. So what is the Virtual DOM and why does React use it?

What is the DOM?

The DOM or Document Object Model is a tree data structure that is used by the browser. It is a representation of the UI in the form of a tree data structure. Any updates to the DOM results in re-rendering or re-painting of the UI.

What is the Virtual DOM?

The Virtual DOM is a programming concept where a clone of the UI is kept in memory. Changes to this clone do not cause a re-render directly. It is synced with the real DOM in the browser by a library such as React DOM.

Why does React use the Virtual DOM?

The DOM model in the browser is a tree data structure which makes updating and searching of nodes easy and fast. The re-rendering of the UI is a performance bottleneck. The more UI components there are, the more expensive the DOM update will be.

The Virtual DOM is a clone of the DOM. No re-rendering takes place when the Virtual DOM changes. A library like React DOM can calculate the difference between the virtual DOM and real DOM and apply the minimum set of changes.

What is the difference between Shadow DOM and Virtual DOM?

Shadow DOM is a browser feature that is used for scoping variables and CSS in web components.

Virtual DOM is a concept implemented by libraries in JS on top of browser APIs.

What is reconciliation?

The render() function in React is called every time you want to render UI in the browser. You can say that the top level render function returns a tree of React elements recursively. On the next render cycle, this tree of components is regenerated. React needs to diff between the two trees and apply the diff to the real browser DOM. The algorithm that React uses to diff one tree with another to determine which part of the UI needs to be changed is called reconciliation. Further reading

The difference between Elements, Components and Instances in React

An element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

A component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.

An instance is what you refer to as this in the component class you write. It is useful for storing local state and reacting to the lifecycle events.

How is an Element represented in memory in React?

When an element’s type is a string, it represents a DOM node with that tag name, and props correspond to its attributes. This is what React will render. For example:

{
  type: 'button',
  props: {
    className: 'button',
    children: {
      type: 'b',
      props: {
        children: 'Hello World!'
      }
    }
  }
}

This is just another representation of this:

<button class='button'>
  <b>
    Hello World!
  </b>
</button>

Component elements

When the type of an element is a function or a class, React calls that components render function. For example:

{
  type: Button,
  props: {
    color: 'blue',
    children: 'Hello World!'
  }
}

React will call the render() method of the Button component

The result of the above will be

{
  type: 'button',
  props: {
    className: 'button',
    children: {
      type: 'b',
      props: {
        children: 'Hello World!'
      }
    }
  }
}

React will go on repeating the recursive calls of the render() function until it knows the leaf elements of all its branches.

Note: Elements are just representations of the components in memory. They are not references to actual instances of the elements. Once an element is created, it cannot be mutated.

Further Reading on Elements, Components and Instances.

What happens when React wants to update the Real DOM?

Like previously stated, elements are immutable. You cannot update their children or attributes. It represents the UI at a certain point in time. At every render cycle, a new DOM model is created. The differences between the two are calculated and minimum changes are applied to the Real DOM.

Wrapping up

React does not do a full re-render everytime the state of one of the components changes. Although, the whole tree will be re-generated if the root component changes. We will look more into this in the next chapter of this series.

Sources

1. https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html

2. https://programmingwithmosh.com/react/react-virtual-dom-explained/

3. https://reactjs.org/docs/rendering-elements.html

In the next article in this series, i will cover the reconciliation algorithm used by React until React 15. Follow me on Dev or subscribe to my newsletter to get updated