DEV Community: AmitThakur11

Reconciliation and Virtual DOM in React

AmitThakur11 — Sat, 08 Jan 2022 08:24:39 +0000

What is React?

It is a JavaScript library for building user interfaces, developed by Facebook. It's often referred to as a framework but it's a library only React is not enough to complete a project. Developers need extra tools like redux, react-router, jest, etc.

If you know about MVC( Model View Controller) architecture, here Facebook has its own refined and enhanced MVC architecture known as Flux, where React is the 'V'.

'V' in MVC

Flux has four components :

Action
Dispatcher
Store
View

As we can see in the above diagram. Here React is the View. When a user interacts with the app, the view creates actions. These actions produce new data and send it to the dispatcher. The dispatcher then dispatches these action results to the store. Store update the state and send an update to the view. That's how Flux architecture works.

Components

Component(a reusable piece of HTML code) is the heart of React. A component is a small feature that makes up a piece of the user interface. Each component is independent, reusable, and isolated. For eg.
Is it possible to write same piece of code again and again for different data? In e-commerce sites, there are product cards providing information about the product. By using components, we can write a piece of code and reuse it for different data.

Virtual DOM

So basically when you write JSX, it gets transpiled into old js by babel or other compilers. It invokes the React.createElement() function with some parameters as per your component and returns a plain JS object that is kept in memory known as virtual DOM.

When the state change, the virtual DOM get updated not the actual DOM. Updating Virtual DOM is very fast as well as cheap as compared to real DOM. React differentiate Virtual DOM with the snapshot of Virtual DOM before the update and this is done by diffing algorithm and finding out the changes after state update. When rendering the updates to the actual DOM, It doesn't render the entire DOM. There are certain optimization techniques that are used to optimize the rendering which comes under the concept known as reconciliation.

Reconciliation process

Diffing comes under reconciliation. Based on some assumptions DOM is updated.

Two elements of different types will produce different trees.

#before change
<div>
     <h1>hello</h1>
</div>

#after change
<div>
     <p>hello</p>
</div>

In the above code, React will rebuild the tree inside div from scratch and all component instances in the old tree are destroyed with their current state.

#before change
<div className ="before">
     <h1>hello</h1>
</div>

#after change
<div className ="after" >
     <h1>hello</h1>
</div>

in the above code, we have two elements of the same type but different attributes, here only attribute updated, instance, and state remain the same.

When we have a list of child elements often changes, we should provide a unique "key" as a prop.

Key provides a unique identity to the elements and helps React to differentiate between them.

<ol>
     <li key ="one">one</li>
     <li key ="two">two</li>
</ol>

Key helps in differentiating elements and keeping a record of changes and updating only those changes instead of rebuilding the whole tree.

what is "this"

AmitThakur11 — Tue, 14 Sep 2021 12:24:39 +0000

"this" is very confusing i know , but we will try our best to grab "this" .

so what is "this" actually means .

this represents an object that executes the current function.

window is the global object in case of javascript, its name defer with the resp to language for eg. in Nodejs , it is called global.

so, when we type window in console of our browser , we will get a object having all global JavaScript objects, functions, and variables.

Even the document object is a property of the window object.

you can read more about window later , but now we have to discuss about This . as you have seen that previous code, after typing window we get a object which is the same as we get when we type this , so why we get the result ? bcz as per defination , this refers to the object it belongs to.

The JavaScript this has different values depending on where it is used and how the code is written . so we will discuss this on different places and then observe its action.

First case : Only this

when we write only this it means it refer to the global object we have seen previously.

Second case : Inside Object

we have create a object name as username which has a variables firstname , lastname and a function fullname .

inside fullname function we console this

Output :

In this example , we can see inside username object we have a member function "fullname" which is console logging this . In the console we can see here this represent the object that execute cuurent function , that is username . let's see what happen if we use fat arrow function instead of normal function .

"this" in Fat arrow function

output

so why we got "code waala" as a output and now this is refering to window object instead of username object , why this is happening when everything is going good .

The thing is that arrow function deals with this keyword in a different way , They don’t define their own context since they doesn’t have its own this context. They inherit that from the parent scope whenever you call them whereas regular function takes the this context of the object under which function isexecuting.

so when arrow function is called it will take this object from its parent , in our case the parent is window because it is calling in window object.

Third case : constructor function

so what are contruction functions ? constructor functions doesnt have any value , they are designed to create new objects .

In the above code , we can see we have created a constructor function username . and from that constructor function we have create two username user1 & user2 .

In case of user1 we got a output "code waala" and this is refering to username object and same for user2 .

but we have covered that member function take this context of the object which is executing them, in case of constructor function this represents to the newly create object as seen in output.

Hope you found something useful..

How to add a pre-loader in your website.

AmitThakur11 — Thu, 07 Jan 2021 10:51:41 +0000

PRE-LOADER

A preloader — or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.Their main purpose is to entertain site visitors while the actual content of the page is still loading in the background.

Follow these steps to add a pre-loader.

STEP 1 : Include a DIV tag in the begining of a body tag and give the tag a Class or Id whatever its on you.
for eg: id = "loading".

STEP 2 : Now link a css file to your HTML file.
See the code below. Here we add few styling to the id "loading".

Position :An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Width :Set width to 100% so your pre-loader will cover entire screen.
Height : Set height to 100vh(100% of the viewport height.)
Background :Here in background we will use different attributes like #fff("white"color you can use whatever color), url(give the gif link which you want to use as a loader.),no-repeat(repeatation of gif will be cornered),center(To get pre-loader in center accn to viewport.).
z-index :The z-index property specifies the stack order of an element.An element with greater stack order is always in front of an element with a lower stack order.

STEP 3 :(a)Now add a onload event in a body tag so it will Execute a JavaScript immediately after a body content has been loaded:

(b)Now add a script tag inside Body tag. Then create variable which we will use to manipulate our 'loading' id. and set the display odf loading to none when the content of webpage load.

--Now your pre-loader is ready.