React Virtual-DOM and JSX

4 min readMay 7, 2021

In today’s story, I will talk about the Virtual-DOM of React and JSX in short. Also, a bonus part is here at the end too.

React Virtual-DOM

React is a JavaScript library. DOM means Document Object Model. It is a representation of structured HTML elements which is present in the webpage. Virtual-DOM is a copy of DOM, and it’s lightweight.

How It Works

The Component Tree structure for the above DOM is created internally by React. When we make a component, react builds the tree of it and adds it to DOM according to its parent. So when the DOM starts to work, first of all, it makes the component dirty. There is an anonymous function() in react event listener. It has a setState() function, which marks the component dirty. It marks the whole component dirty, not just an HTML element in DOM. After that, React updates the Virtual DOM to use the diffing algorithm to update the actual DOM.

Then React runs a batch update to check if any component is marked dirty or not. If it finds any dirty components, it starts updating them. We generally use the render() function in React, and the Virtual DOM is rebuilt here, and the diffing algorithm takes place. Following this algorithm, React do the reconciliation of Virtual DOM to the actual DOM. During reconciliation, it first finds the updates in Virtual DOM. If it finds any React, update the real DOM and show the changes in the web browser or web app.

I tried to explain the functionality of Virtual DOM above. This is how the React Virtual DOM works.

JSX

JSX provides syntactic sugar for the React.createElement(component, props, …children) function. Lets see from an example,

<Tag property=”attribute”>
Inside of tag
</Tag>

It will compile like,

React.createElement(
Tag,
{property: ‘attribute’},
‘Inside of tag’
)

Here I wrote the tag name in capitalized form. So that JSX can understand it as a React Component. Also, these tags must be in scope. You can also use dot-notation to refer to React Component.

Props

To send props through components, you have to surround the props with {}. Like,

<Component {props} />

You can send string literals as props. Like,

<Component stringLiterals = {‘props’} />

Default props value is true. But you can define it too like

<Component defaultValue = {true} />

If you want to send objects as props, you can pass this too. This time you have to use the spread operator. Here is an example,

const props = {key1: ‘value1’, key2: ‘value2’};
<Component {…props} />

Children of JSX

Anything in the starting and closing tags of the component will be sent as children. The props are props.children.

You can pass string literals as children. Like,

<Component> String Literals </Component>

Here the props.children is “String Literals”. Also, JSX removes any white space or line break in any components while passing as children.

To provide other components as children you will have to write code like this,

<ParentComponent>
   <ChildComponent1/>
   <ChildComponent2/>
</ParentComponent>

So this was JSX, in short. Also, you can pass function, JS expressions as JSX child props too. Here null, undefined, false values are ignored by JSX. To give them and see them after render, you have to stringify these ignored values.

It’s bonus timeeeeeee. Today we will learn about how to optimize the performance of React applications. So lets gooooooooo.

Internally, React uses various clever strategies to reduce the number of time-consuming DOM operations needed to update the user interface. For many applications, using React can result in a quick user interface without requiring extensive performance optimization. However, there are many methods for speeding up your React application.

Production Build

There are two types of build versions in React. One is a development build, and another one is a production build. When you are testing your web application, make sure it is in the production build. It will show some warnings, which makes the app faster. And when working on an app, make it to development build. To create a production build, just run

$ npm run build

This will create a folder named build in your project folder. This is for before deployment. But if you want to work on your app, just run

$ npm start

One of the most efficient builds is the Brunch build. To do this, you have to install the terser-brunch plugin,

npm install — save-dev terser-brunch
or
yarn add — dev terser-brunch

After that,

$ brunch build -p

Like brunch builds, there are also Browserify, Rollup, and webpack. To use these builds, you have to install some plugins in your project.

Long Lists Can Be Virtualized

I suggest using a technique known as “windowing” if your application makes long lists of data (hundreds or thousands of rows). At any given time, this technique only makes a small subset of your line. React-window and react-virtualized are the best windowing libraries to do this. It will help to reduce the re-rendering time.

Reconciliation can be avoided

When a component’s props or state are modified, React compares the newly returned element to the previously rendered one to determine if an actual DOM update is required. React will update the DOM if they are not similar.

You can do this by using shouldComponentUpdate() function. Here if you don’t want to update your component, just send false through the function. It will skip the rendering process for that component.

Not Mutating The Data

To avoid mutating the data you can use spread operator. For example,

functionName() {
this.setState(state => ({
words: […state.words,’newWord’],
}));
};

This helps to not mutate with old or original data as it makes new data from old data and returns it.

So today, we learned about the Virtual DOM of React and how it works in React, then JSX in short. Also, in the bonus section, you guys came to know about how to optimize the React application’s performance by using production build, virtualizing long lists, avoiding reconciliation, and not mutating the original data. Thank you.