React Under the Hood

Day 1 of React Learning - Milestone 2 (Week 2)

We are on the 1st day of React learning. Here we begin Milestone 2. Let’s dive into it.

1. How React works under the Hood?

Since React became popular from the day it released back in May 2013, a misconception about it started. Many people getting into the web development industry have somehow heard or known that React is a framework released by Facebook. But the thing is that React is a powerful JavaScript library, which in case a dominating UI tool and making developers' life easier day by day.

Interestingly React works in a unique way under the hood. There are some mechanisms that React follows to compile UI inside the browser. We are briefly describing them one by one:

JSX

A syntax that is not either HTML or JavaScript, but a common language for both. By using JSX we can put HTML inside JavaScript code and vice versa.

Babel

Transpiles (Translate + Compile) ES6 code into ES5 code to support the latest features of the language for most browsers. It also transpiles JSX syntax into the JavaScript code.

Babel Transpilation (ES6 to ES5)

Webpack

An open-source JavaScript module bundler which bundles lots of files into a few files.

node

A runtime environment for JavaScript that allows us to run JavaScript code outside the browser.

npm

A package manager for node apps.

2. Virtual DOM

Virtual DOM is a React object which is the Virtual version of the actual browser DOM. React always create a virtual version of DOM whenever it detects a change in UI from the user.

Remember that,
Virtual DOM → React Object
Browser DOM (DOM) → Browser Object

Whenever there is a change in the app, React creates a new Virtual DOM. Virtual DOM is too fast than the actual browser DOM. It can produce 200,000 Virtual DOM nodes within one second. Every time there’s a change detected in the UI, React creates Virtual DOM from complete scratch.

3. Diffing Algorithm

An efficient algorithm to compare the old Virtual DOM with the new one. React never uses the actual browser DOM. It creates a virtual replica of the browser DOM tree (which we call Virtual DOM) and keeps that in memory. When a change is detected in the app, it creates another virtual DOM. That means React creates two virtual DOM.
Diffing Algorithm compares the previous virtual DOM with the new one (that means, virtual DOM created after the app change). If the algorithm detects any change between the virtual DOMs, it updates the actual DOM.

Diffing Algorithm -

1. keeps the similar type of DOM element unchanged that it catches from comparing the two virtual DOM and change only the attributes and the props only (not everything).
2. the time complexity of this algorithm is O(n³) to calculate the minimal change, which later, for the enhanced algorithm, is optimized by React down to O(n).
3. for different DOM node, it re-render the entire subtree.

4. MVC

Yes! It’s MVC… Though React is not a framework, it also supports the MVC architectural pattern. The MVC separates the React app into three components.

1. Model → it is compared with the React Component, which manages the protocols (data and the rules) of the application.
2. View → it is compared with the React render() function, which is the output, in React App, the browsers DOM.
3. Controller → it is compared with the click events or API requests, which takes user inputs and converts it into the commands for the Model or View layers.

5. Why React is named to React?

React application is all about components. A change in the component’s state refers to the UI change. In simple words, when the input changes, the output will also change.

Facebook named this JavaScript library as React because whenever the state of a component is affected, the UI presented to the user gets the replica of it.

That means, reacting to the User Interface (UI) with respect to the component change. We don’t update this manually in the React app, on the other hand for a browser DOM we need to manually change it.

6. HTML Template vs. Tree of Objects

Many frameworks and libraries use HTML templating for DOM rendering in UI. This is a complex and time-consuming way to display UI. Because HTML Templates need to be converted using JavaScript, and then the browser will understand the code.

But in React, it is easier to complete DOM operations, which is also faster than the templating process. React just use the tree of objects interpreted by the React API for DOM operation, and in a very short time, the DOM tree is generated for the browser.

7. Reconciliation

The reconciliation process is where React

• Compares the previous internal instance with the next internal instance.
• Updates the internal Instance which is a Component Tree structure in JavaScript Object (Virtual DOM).
• And updates the actual DOM only at the node where there is an actual change along with its children.

The diagram below helped me to understand better -

credit: https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

8. Hooks

A special function of React, which can be used for managing operations such as side effects, detecting component’s state change, or to store temporary objects. The naming convention for hooks always starts with use.

hooks allow us to easily manipulate the state of our functional component without needing to convert them into class components.

Syntax:
const [count, setCount] = React.useState(0);

Example:

const Button = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
};
ReactDOM.render(<Button />, mountNode);

9. React Fiber

React Fiber is a reimplementation of the React reconcile. It is an internal engine change that allows React to break the limits of the call stack. Its creation enables React to pause/start rendering work at will.

According to Andrew Clark, how Fiber works are pointed below:

• Assign priority to different types of work
• Pause work and come back to it later
• Abort work if it’s no longer needed
• Reuse previously completed work

10. shouldComponentUpdate

• shouldComponentUpdate() is a lifecycle hook that React gives us so we can optimize the speed of our app.
• return false to block update of this component.

That’s all for today. Happy Learning :)