React Internals Explained – How React works under the hood?

Front-end technology has progressed significantly in the recent decade. Designing and developing a front-end web application is no longer as simple as it once was. There are several front-end frameworks and libraries widely available.

React.js is one such library. Facebook launched it in 2013. Given the fact that it is a library, we usually relate to it as a framework. React is only concerned with an application’s display layer. In the MVC architectural paradigm, React is the View (V). Because we create the views in JSX (JavaScript XML), we can write Javascript directly in our HTML.

In this article, we will take a deep dive into React to explore how React works internally, as well as how the process of displaying the UI and maintaining the state is optimized to deliver an excellent speed gain.

React building blocks

The React library is extensive and contains a large number of elements that we couple together to display the UI while also maintaining the app state. React was essentially developed around three crucial components: React Core, React renderer, and React reconciler. Before we get into these components, let’s go over some key concepts that we’ll be using throughout the discussion.

What is a DOM?

DOM is an abbreviation for Document Object Model. It represents the HTML page as a tree of elements called nodes. The document is the root node, and the child nodes form the subtree. The DOM interface lets us do operations such as the addition, modification, or removal of items from the document. Whenever any change to the DOM occurs, the browser re-renders the UI.

Let us look at the DOM representation of the following HTML document.

<html>
  <body>
    <nav>
      <h1>Hi</h1>
    </nav>
    <main>
      <p>React is awesome</p>
    </main>
  </body>
</html>
Code language: HTML, XML (xml)

The DOM representation of the HTML document.

What is a Virtual DOM?

The virtual DOM (or VDOM) is a virtual replica of the actual DOM. It is an object created to resemble the actual DOM. Because it does not write to the screen, the virtual DOM is less expensive to generate than the real DOM.

Let us look at the sample Virtual DOM representation of the following HTML document.

<div>
  <h1>Hi</h1>
  <p>React is awesome</p>
</div>
Code language: HTML, XML (xml)

{
  type: 'div',
  childrens: [
    {
      type: 'h1',
      text: 'Hi'
    },
    {
      type: 'p',
      text: 'React is awesome'
    }
  ]
}
Code language: JavaScript (javascript)

What is JSX

JSX is a JavaScript Extension Syntax that React uses to combine HTML and JavaScript easily. We usually refer it as a syntactic sugar. We employ code transpilers such as babel to translate the JSX code to the JavaScript syntax.

Let us look at the JSX syntax and the code it produces after being compiled to React requirements.

<div>
  <p>React is awesome</p>
</div>
Code language: HTML, XML (xml)

React.createElement("div", null, React.createElement("p", null, "React is awesome"));
Code language: JavaScript (javascript)

The JSX syntax gets converted to React.createElement method, which is responsible for generating a node within the virtual DOM.

React Core

The React Core contains all of the API required to define React components. It is where we’ll find methods such as createElement. It also manages state management, communication between various components, and so forth.

React Renderer

The renderer is a component of the React framework that is in charge of rendering React components on various platforms such as the Web, Mobile, and so on. There may be changes in how renderers function on different platforms, but the underlying logic remains the same.

Different platforms utilize numerous rendering approaches. For example, in web-based applications, the DOM is utilized to render the content. To alter the DOM and re-render the UI, we may use methods like appendChild() and remove() on the DOM nodes. For mobile apps, however, we require UI support straight from the operating system. However, the React library does not manage this; it is the renderer that performs all of the rendering tasks for multiple platforms.

React Reconciler

React works faster because of the reconciliation process. Reconciliation is the process through which React changes the Browser DOM. It contains the diffing mechanism, which decides which parts of the tree the renderer should update. In other words, when we make a change, React reconciler reconciles the DOM tree with the React element tree. React uses the diffing mechanism to recognize the difference between the two trees and determine which portions of the tree React should rebuild.

Because the elements are unchangeable, we cannot update their children or properties as it reflects the user interface at a certain point in time. React constructs a new DOM model with each render cycle. It computes the differences between the two and makes only the necessary adjustments to the actual DOM.

Keys in React

Lists in React are similar to arrays in JavaScript in that they store many values of the same data type. We utilize the map() method to traverse the list items and update the list content when generating a list in React. Keys function similarly to a special string attribute provided in creating a List of Elements. They are essential in React since they tell us which elements in a given list have changed, been updated, or deleted. In other words, the keys assist the reconciler in identifying the information in the Lists and aid in the unique identification of List components.

How React works?

When the app first starts, there is nothing in the Virtual DOM and the real DOM. As a result, the set of instructions supplied to ReactDOM must include instructions for creating everything from the start. However, when we interact with the user interface, such as by clicking a button, the application state is modified. The state variable is changed programmatically to include specific new or altered entries.

However, in the further steps, the importance of the Virtual DOM becomes more prominent. When a Component’s state value changes, React calls the Component’s render() function again. Similarly, as previously, invoking render() will produce a tree of Elements. This time, though, the tree will incorporate a new Element to symbolize the new objects. React now has an old tree that describes what it currently looks like and a new tree that represents how the updated page should look. React must now compare these two trees and provide ReactDOM with instructions to sync anything that has changed, which results in adding items to the UI. This is How React works.

Conclusion

In summary, React gives developers a declarative approach to expressing how a web page must look without continually worrying about the various complexities of the browser’s rendering process. It does this through JS object trees and well-stated criteria for recognizing when modifications have happened. These rules allow developers to optimize performance further to meet the demands of their applications.

Thank you so much for reading ?