Nerd For Tech
Published in

Nerd For Tech

An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-V

Highlights of Part — IV

  • Every time a new repaint happens in a real DOM tree, it comes with a huge performance cost. This is because more calculations are involved.
  • Reflow and Repaint are identified by the browser to optimize the process
  • React adds an extra layer before the browser. This extra layer is called virtual DOM.
  • When anything is updated, react creates new virtual DOM. This in turn compared with the old virtual DOM. This process is called ‘ Diffing’.
  • All the changes in DOM are sent to the queue, this queue is then batched.
  • These batched changes are sent as a single update to the original DOM. This makes it a Batch update. It is this batch update that makes it easier and optimises performance.

Understanding Virtual DOM from JS perspective

We know that DOM has a tree data structure. In Javascript, trees are represented by javascript objects. Since JS is a Real-DOM manipulator, we can leverage the same to a virtual DOM manipulator. Just like we manipulate real DOM through DOM queries, we manipulate virtual DOM through React DOM queries. Just like DOMs are made up of DOM elements, React/Virtual DOMs are made up of React elements.

Note: Above explanation is for easier understanding. In reality DOM elements and React elements are not the same. In reality, react elements are instructions for creating browser/real DOM.

Creating React element

React creates elements using React.createElement

If you want to have an h1 element in the browser DOM, we should first create in react DOM.

Since react takes care of browser DOM, we don’t need to care of browser DOM. We will only care about React element.









Above method(createElement) creates <h1 id=’blog’>PansofArjun</h1> in actual DOM

If you observe, there are three arguments in the above createElement method.

First one — the type of element we want to create i.e h1

The second one — elements properties i.e id:’blog’

The third one — elements children — any node inserted between opening and closing tag i.e PansofArjun

Suppose if you want to console log this react element, we need to create a variable to store this element because we can’t directly console log React.createElement.


const element = React.createElement








If you were to console log, you get a JS object



key: null,









The Object keys are type, key, ref, props,_owner and_store. We will learn ‘ type’ and ‘ props’ now.

type — what type of element we want to create in real DOM

props — data and child required to construct the real DOM

Magic of props.children!

In the above example, props.children are set to ‘ PansofArjun’ which is a text node. We can also set this to another element node like lists.









If we were to console log this like earlier





type:’li’,props:{children:’one’ etc},

type:’li’,props:{children:’two’ etc},

type:’li’,props:{children:’three’ etc}





Note: It includes the key, ref, owner and store.

We said ‘props’ includes data and children to construct the real DOM. But wait! where is data here? It is the value of props.children key — one, two and three.

We can store data as an array like const arr = [one,two,three].



null, => React.createElement(‘li’,null,data))


What we did above separated data from UI elements i.e we stored data separate variable(arr) and integrate them into UI using javascript logic(map functions)

Separating data from UI is one of the major advantages of using React.

We can comfortably say from above that ‘ React is made up of React elements’ which is self-evident from props.children !

Originally published at on March 15, 2022.




NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Recommended from Medium

How to integrate Storyly in your React Native app

Functions in ES6

Why study graph algorithms?

Upload and resize images to the cloud with Aws S3, Amplify and React (Part 8)

Do You Really Know UseEffect?


Our Serverless Blueprint: The step-by-step guide

All Things JavaScript Part — I

MERN Auth with Session — Part 1: Express Login API

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arjun Vaidy

Arjun Vaidy

Founder of a startup. I explain things through first principles and intuitive mental models

More from Medium

Writing A Custom Rest API Hook

useReducer& Context API & Redux & RTK(Redux Toolkit)

Create a Pagination in a React Way

An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-I