Understanding How React.js Works Under the Hood
React is one of the most popular JavaScript libraries. A lot of startups and big corporations choose React for building fast front-end side applications for their projects. As of today, React has more than 8 million downloads weekly. But what is it that react does which makes it so popular? How does it even work?
In this blog, we will explore how React works under the hood and what its salient features are that have led to its widespread acceptance in the development community.
But before we dive into React, let us first understand the problems faced by developers while making feature-intensive web applications using just plain JavaScript.
Real DOM
We know that when our web page is loaded in the browser it creates a Document Object Model (DOM ) of the page. This DOM is constructed as a tree of objects. It acts as an interface (API) to modify the nodes(HTML elements) contained in it. The DOM provides different methods like getElementById or querySelector to target each node and we use JS to make changes in the DOM. But DOM manipulation is slow.
What makes DOM manipulation slow?
As DOM is represented as a tree structure, changes to the DOM are pretty quick but the changed element and its children have to go through a Reflow/Layout stage, and then the changes have to be Re-painted which are slow. The re-painting or re-rendering of the UI is what makes it slow. Therefore more the items there are to reflow/repaint, the slower your app becomes. This means that to have a good performance we should avoid touching the DOM, as much as we can and should only make changes to the DOM when we are absolutely sure it’s the minimal course of action.
Using a Virtual DOM — The fast alternative
React uses something known as Virtual DOM to overcome the slow DOM manipulation problem. A virtual DOM object actually has the same properties as a real DOM object but unlike the Real DOM, it doesn’t directly affect anything on the screen. Meaning the virtual DOM is just a blueprint or a virtual representation of the real DOM and it doesn’t deal with re-rendering of the UI. This allows making changes to the virtual DOM much faster compared to making changes in the real DOM.
Virtual DOM in React
In React every UI element is a component, and each component has a state. A state of a component is basically an object that holds some information that may change over the lifetime of the component. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current updated version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”. On identifying which objects have to be changed, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. To improve performance further React uses a batch update mechanism to update the real DOM. This basically means that updates to the real DOM are sent in batches, instead of sending updates for every single change in state.
The green circles represent the nodes that have their states changed. The difference between the previous version of the virtual DOM tree and the current virtual DOM tree is calculated. The whole parent subtree then gets re-rendered to give the updated UI. This updated tree is then batch updated to the real DOM.
Creating Elements in React using JSX
JavaScript XML or JSX is an extension to the JavaScript language syntax which allows us to write HTML elements in JavaScript and place them in the DOM without directly calling any createElement() or appendChild() methods. JSX converts HTML tags into react elements. Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. For example, the below JSX code
<h1 className="title">
Hello World
</h1>gets compiled to:
React.createElement(
"h1",
{ className: "title" },
"Hello World");The first part of the JSX tag determines the type of React element. Using JSX is not mandatory but it is highly preferred as it makes the code simple and elegant. Without JSX writing code becomes cumbersome if we have components that have nested child elements. Below example shows a code with JSX :
<div className="wrapper">
<h1 className="title">Title</h1>
<h2 className="h2">Sub Heading</h2>
</div>)and without JSX :
React.createElement(
"div", { className: "wrapper" },
React.createElement("h1", { className: "title" },"Title"),
React.createElement("h2", { className: "h2" }, "Sub Heading")
);JSX thus helps you bring the cleanliness of HTML to the power of JavaScript and makes creating new HTML elements very easy.
Rendering of our React Application
Now to the final part: How does it all come together? How does React render your components to the browser? This is done using ReactDOM. ReactDOM recursively creates nodes depending on their ‘type’ property and appends them finally to the DOM. It receives two arguments, the first is what to append and the second is where to append to.
If you use create-react-app you must have come across the index.html file in the public folder and the index.js file in the src folder. React needs just one actual div created in the HTML file so that it can target that div and attach its total node tree onto that. This is implemented by passing the Root parent component as the first argument and the id of the single div element( usually the id=” root”)present in the index.html file to the ReactDOM.render() function.
Conclusion
This was somewhat a condensed representation of the most important concepts in React and how they work. React is nowadays used in plenty of modern web applications and understanding how it works is a key to becoming a master. If you feel like exploring more about this beautiful library you can head over to the react official documentation.
Thanks for reading and feel free to leave any suggestions or questions and if you liked the blog you can show your support by leaving a clap.
