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

Highlights of part — V

• React is a Javascript framework and hence React virtual DOM is created by javascript methods. This method is called React.createElement
• When you console log any element created by React.createElement, you will get a JS object with keys :
• type: what type of element we want to create in real DOM — h1,p, div etc
• props: data and child required to create real DOM — text, nested element etc
• We can use data and apply logic using javascript

Is it okay to write React.createElement() ?

When you write React.createElement every time you want to react element, this is like adding fuel to the fire. Say we need to list all districts in all states. We will list<li> tag to display districts like

<ul>
<li>Thanjavur</li>
<li>Trichy</li>
</ul>

The options are

1. We need to hardcode it manually for all states
2. We can use JS logic with input data
3. We can hardcode React.createElement to create react elements and then feed them to virtual DOM

The second and third option is the same. In fact, the third option consumes time more than the second one. But we will have to evolve a strategy from the third option. Here the strategy would be finding a common pattern in the above scenario.

Let me reiterate the scenario,

We need to display all the districts using a list tag for every state.

What changes here is Data(i.e districts) but UI remains the same.

We will have to tweak a React.createElement like input and output system while output being the same UI with input data.

That system that takes in data and processes and fits into the same UI is called React Component.

We can feed any state’s data into this system and the output will be a list of districts with the same UI(i.e <li>).

This system can be created using Functions and Classes in javascript. The name of the system is called React Component. Function-based components are the future and more concentrated by React core team.

React components are simple javascript functions that returns react elements(i.e plain js objects)

Recap

• Update of actual DOM using DOM manipulator (JS) is not efficient.
• Repaint and Reflow are two processes while updating the actual DOM
• React addresses the problem by adding another layer before the actual DOM. This layer is called Virtual DOM.
• Virtual DOM is the replica of actual DOM without attached to the screen(i.e won’t reflect the screen)
• Whenever an update happens, React creates new virtual DOM.
• The new virtual DOM and the old one is then compared to find what is changed/updated. This process is called ‘ Diffing’
• Whatever is changed is sent to the queue. This is then batch updated in real/actual DOM. This batch update makes the whole process easier. So React make the process easier and more efficient and not the whole new faster process
• From JS’s perspective, this virtual DOM is a simple object with keys — type, key, ref, props, _owner, _store.
• The key ‘ props’ have ‘ id’ and ‘ children’ keys nested. This is the foundation of creating nested elements in React(parent-child relationship)
• This object is created by React.createElement().This JS object is called React element.
• We need reusability in code and hence using/writing React.createElement is tedious and non-reusable. This evolves to the concept of React component.
• React Component makes react code reusable. The component can be created by Function and Class in Javascript.
• React components created by functions are way forward and promoted by React team.
• Therefore React components are simple javascript functions that return React element(i.e JS object with key — type, key, ref, props, _owner, _store)

Originally published at https://www.pansofarjun.com on March 19, 2022.