DEV Community: Prajwal Jain

Behind the Scenes of React.

Prajwal Jain — Wed, 26 May 2021 05:56:07 +0000

Behind the Scenes of React

Aren't you guys curious🤔 about what does React do behind the scenes and how it does so many things for us..?

Well, this blog comes out of my curiosity of how the developers at facebook came to create this wonderful thing which caused a revolution in the World of Web.

Do you know that react has its own DOM! Ya, you got it! same as that of browser has!

Okay. You may think that's great! But why would someone need an Extra DOM?
Eventually, whatever changes are going to occur are on the browser's DOM, right?

Well, that's true.. But but but...there are some crucial points we need to understand.

Whenever a component's state changes, code is re rendered by DOM, and browser has to repaint each and every element on the screen. This involves a lot of mathematical and other calculations.
And thinking at scale, our app would have multiple state changes.
So our browser is doing unnecessary cycling of complete DOM whereas only a single elements' state has changed. Thus, More the items to repaint slower the app.

And that's the reason why, React has Virtual DOM.
It helps in minimizing the actual changes on browser DOM. How?

Lets see.

Initally, virtual DOM will be an exact copy of real DOM.

In React, whenever a components' state changes, the changes are reflected in Virtual DOM.
Thus, Virtual DOM has the updated state of the component.

Now it checks

if(VirtualDOM === Browsers DOM) {
    just chill man!
}
else {
    update the browsers DOM only where that component has changed.
}

This is a high level overview of what diffing algorithm does.

Thus, browsers' work has highly reduced and now it will help us loading our app faster!

The process through which React updates the DOM is known as Reconciliation.
This reconciliation has 2 phases :
Render Phase
Commit Phase

Render Phase

The Render phase takes your JSX and turns it into a javascript representation. This is nothing but the VirtualDOM.

Commit Phase

The commit phase is actually taking that representation and applying it to the real DOM.
The commit phase is where React actually touches the DOM and makes changes.

An Important Point:
React does not commit state changes one after the other if there are multiple state changes.
Instead,
React goes through its virtual DOM ,creates a list of those changes that need to be made to the actual DOM and then does it all in one single process.
In fancy words, React does batch updates.

So putting all pieces together,
Reconciliation = Render + Diffing occurs in between + Commit.

If there is no change in the state then commit is not done although render has occured.

Now that you have understood reconciliation lets understand how diffing works and different factors that affect diffing.

React works on heuristic search. In simple terms, a heuristic search is a technique which has some previous knowledge about the search.
So the assumptions(knowledge) that the React has is:

Two elements of different types will produce different trees.
For a stable re-render key props are required on child elements.(Refer Docs)

Whenever the root elements have different types,
for eg. initially it was

<h1>Hello React</h1>

and then we change it to

<p>Hello React</p>

React will destroy the old tree and build the new tree from scratch. All the children will also get destroyed.
Destroying old tree => all the state associated with it is gone.

DOM Elements Of The Same Type

When comparing two React DOM elements of the same type, react only updates the changed attributes.
Same goes when updating style.
For eg:

<h1 className="hero">Hello React</h1>

is changed to

<h1 className="header">Hello React</h1>

When only the attributes are changed, DOM nodes are not recreated => state is maintained =>component is already on the page => DOM does not need to repaint the DOM styles on the view. This is what makes React super fast!

Component Elements Of The Same Type

Now we are on COMPONENTS of same type. Earlier it was DOM elements of same type.

Instead of reiterating what docs has written, read react docs. It has been beautifully explained there along with simple examples.

That's it from this blog!
If you found this post useful do react to this post, which inspires me to write more. If you have any comments or corrections that could improve this post, I would be glad to receive them. Thank you for your time 👋🏼 💙.

why use useState?

Prajwal Jain — Tue, 25 May 2021 12:40:59 +0000

useState

useState is a react API to change the state of elements or components.
Why do we require a seperate hook to change a value of an element?

Well,Its always a bad practise to mutate the state directly.

Let me explain things along with the code itself.

import { useState } from "react";
import "./styles.css";
export default function App() {
  let [user, setUser] = useState("user");
  return (
    <div className="App">
      <h1>sample program to show declarative programming</h1>
      <hr />
      <button
        onClick={() => {
          user = "prajwal";
          setUser(user);
          // if you dont use setState line no 19 does not run => function is not called => rerendering does not occur.
          console.log("from onclick", user);
        }}
      >
        Click Me{" "}
      </button>
      {console.log(user)}
      <h1>welcome {user}</h1>
    </div>
  );
}

What does this code aim to do?

We want to display user's name instead of just user as a text when button is clicked.

A bad dev like me would probably do something as

(which is wrong)

import "./styles.css";
export default function App() {
  let user = "user";
  return (
    <div className="App">
      <h1>sample program to show declarative programming</h1>
      <hr />
      <button
        onClick={() => {
          user = "prajwal";
          console.log("from onclick", user);
        }}
      >
        Click Me{" "}
      </button>
      {console.log(user, "this is from user")}
      <h1>welcome {user}</h1>
    </div>
  );
}

Note: I am purposely showing the wrong approach.Sometimes looking at what is wrong helps us understanding what is correct!!

Here goes the sandbox link for the right approach.

If you see the console.log within onClick you could see that the value of user has been updated.But Wait!Why isnt it reflecting in the view?

Its because..

if there is no setState =>(implies) React does not see any state changed => re-rendering of function does not occur => view would no be updated.
if you dont use setState, {console.log(user, "this is from user")} does not run => function is not called => rerendering does not occur.

everytime setState() is invoked,a re-render is triggered.

Conclusion:
only when the state is changed through setState the re-rendering of function occurs.

Thank you for reading till the end. If you notice something wrong do suggest me in the comment box.
Do give it a like if it helped you understanding the concept.

Declarative in terms of React.

Prajwal Jain — Tue, 25 May 2021 12:16:31 +0000

what is declarative in terms of react?

if you are new to react then you might have heard about react being declarative.
What exacly does that mean?Lets have a look.

Say we have a button with us and initially a normal text of welcome user.

What we want to do?

We want to display user's name instead of just user as a text when button is clicked.

Lets have a look at the following code.

<h1>sample for showing that react is declarative</h1>
<hr />
<button id="btn-click">Click me</button>
<div>
  <h2>welcome <span id="user">user</span></h2>
</div>

Here is what we do in vanilla javascript.

document.querySelector("#btn-click").addEventListener("click", () => {
  document.querySelector("#user").innerText = "prajwal";
});

So we need to tell the browser each and every step which are as follows:

hey browser, give me the button which lies on the document whose id is ....(btn-click) in our case.
Do something (step 3) when user clicks on that button.
when user clicks on that button,give me that element which lies on the document and whose id is ....(user in our case)
set the text as ....(prajwal in our case) on it.

Some crucial points to be noted:

we are dealing with the browser's DOM to perform our actions.This,is what we dont do in React.We never interact with DOM in React. So after the birth of react this procedure seems more like a donkey work.
We are telling browser each and every instruction and then it does something for us.

Here is the codepen link if you wish to try your hands on

React has came out with a smarter approach and thats nothing but declarative!

Lets see the react code..

import { useState } from "react";
import "./styles.css";
export default function App() {
  let [user, setUser] = useState("user");
  return (
    <div className="App">
      <h1>sample program to show declarative programming</h1>
      <hr />
      <button
        onClick={() => {
          user = "prajwal";
          setUser(user);
          // if you dont use setState line no 19 does not run => function is not called => rerendering does not occur.
          console.log("from onclick", user);
        }}
      >
        Click Me{" "}
      </button>
      {console.log(user)}
      <h1>welcome {user}</h1>
    </div>
  );
}

Here is the code for you to play with.

Again if you dont know about useState you can read this blog.I have tried to explain things in a simpler way with the same example so that it is relatable.I do suggest you to check out this blog.

In this react code,you see we only tell the react..
Hey React,I want to display something... on this element when some one clicks on the button.
Neither we do document.querySelector nor we do .innerText..i.e. We dont deal direclty with browser's DOM.But still the work is done.How?Well,React does all of that for us.

you see,We dont give set of long instructions.
We only tell react what to do..how does react do that is react's look out.

Its more like saying

TL;DR

"suun react,tuze ye element pe ye text dikhana hai..kuch bhi kar kaise bhi kar bass kaam ho jaana chaiye..!"

Thats declarative!

Thank you for reading till the end. If you notice something wrong do suggest me in the comment box.
Do give it a like if it helped you understanding the concept.

Font Size:em,rem,pixel or percent?

Prajwal Jain — Thu, 31 Dec 2020 16:04:04 +0000

I still remember when I was creating my first portfolio site and was trying to make it responsive,even after creating many media queries I wasnt able to get the desired reponsiveness.I was totally frustrated.

And then I came to know it was because I had used font sizes in pixels.

So, my dear friends,I dont want you to waste your valuable time on such simple things like I did!
So do read till the end.

pixels (px) do not scale.
It is an absolute unit.

Whereas em , rem are relative/responsive units.
They scale according to the viewport.

Change in the value of parent or root element affects the value of relative units.
em should be used for padding,margin,line-height etc.

Okay so before studying em and rem,
Remember default font size of browser is 16px.

Thus 1rem = 16px by default.

USING EM - ELEMENT

For eg.

Style	Computed style
html { font-size:18px; } section { font-size:14px; padding:3em; }	html { font-size:18px; } section { font-size:14px; padding:42px; }

So independent of font size specified in html element em takes the font size of its local element.
And if font size is not defined in its local element then it checks it parent's element.
This is a part of inheritance in em units.
We shall learn more about inheritance later in this blog.

USING REM - ROOT ELEMENT

For eg.

Style	Computed style
html { font-size:18px; } section { font-size:14px; padding:3rem; }	html { font-size:18px; } section { font-size:14px; padding:54px; }

Independent of font size defined in local element it takes the value in the root element i.e. html

EFFECT OF INHERITANCE ON EM UNITS

Inheritance changes the game in em units and also makes it quite complex.

With em the child element inherits the value of its parent and up to its grandparent.

<section class="wrapper">
    Grandparent
    <div class="container">
        Parent
        <div class="container">
            Child
        </div>
    </div>
</section>

Style	Computed style
html { font-size:16px; } .wrapper { font-size:1.5em; } .container { padding:2em; }	html { font-size:16px; } .wrapper { font-size:24px;//16 * 1.5// } .container { padding:48px;//24 * 2 // }

If we want to override the inherited values then we need to expicitly set the unit element to px.

Stylesheet

<section class="page-wrapper">
    GrandParent
    //16px
    <div class="container">
        Parent
        //24 * 1.5 = 36px;
        <div class="container">
            Child
            //36 * 1.5 = 54px;
        </div>
    </div>
</section>

html {
    font-size: 16px;
}
.page-wrapper {
    font-size:24px;
}

.container {
    font-size:1.5em;
}

Here the font size of div with .container class is computed based on its parent element.
The interesting thing here is that the parent and child in the HTML above do not have the same font size irrespective of the fact that they share the same class name.

PERCENT

Use percent specifically when making site responsive.
Also for ease of usage most programmers do the following.

html {
    font-size:62.5%;
}

Thus now 1rem = 10px;

This makes furhter calculations easier.

CONCLUSION

These are just my personal recommendations based on my research and studies.

em should be used for padding,margin,line-height etc.
em for those elements whose properties shall scale with the changing viewport.
Use rem for everything else.
For changing viewports, use % unit in font size.This makes font size responsive.

Note:
Guys, I have taken reference of this blog.
Sizing in CSS: px vs em vs rem
This is really a very helpful blog!
Do give it a read for more undertanding.

git:a simple conceptual explanation for a beginner.

Prajwal Jain — Sun, 22 Nov 2020 16:48:05 +0000

Note : This blog does not tell you in details about the commands you need to use.It just explains what they do.

An Overview

What it basically does is saves different versions of your file.

Like when you write a program,you change the file number of times.
Git helps us to save(in better words 'track') those changes.Thats it.

Why we need Git

Imagine you and your team is working on same file on a college project which is index.html

So..You guys are all set to 'type' the already coded file that you have with you.
You both log in with a common id but on different machines and start editing the same file simultaneosly.
You would be like "Hey!From Where did this rascal piece of code is coming from..I never wrote it!!Let me delete this"
And your friend be like "Why this shitty piece of code is getting deleted always..Coding is such a frustrating?Why did they even invent this???"

And the Uparwala be watching and thinking "In naadan balkon ko git nai pata!!"

Okay..Coming back!
What do you think will happen?
Yes!file is changed from both ends and gets corrupt.

And this is only you and your friend!Imagine tech giants like flipkart where hundreds of developers are working together!How would they manage all these changes to the same file?

And thats where Git comes into picture!

Now lets see some terms and terminologies.

Terms and Terminologies

What is a repository?

Just a fancy name for folder.

There are some commands you need to know if you are using the CLI version.

There is something known as add.

This is how the command is

git add <file_name>

What this command does is adds all your changes to an intermediate agent.
Yes they arent yet given in right hands.
By running this command you only give that file which you have just changed to that middle man.
That middle man in fancy terms is known as stagging area.
Now how to move it safely into right hands and save changes.

For that lets meet this guy.

There is something known as commit

Remember I told you that git saves different versions of your file.
How?Well commit is the answer for that.
For now , see commit as save changes.
Replace commit word with save changes.
You can also imagine it like a game checkpoint.
You are on a mission in GTA and you know there are checkpoints..So if you are killed somehow,you would not need to start all the way from beginning.Your latest checkpoint is where you start from.

The command runs like this:

git commit -m "Initial commit"

-m stands for message.
You change the file every now and then.
You run and you see Oh! ';' is missing,
Again you run Oh!I missed a brace!!
Sometimes you add ,sometimes you delete.
So only saving changes is useless until you get to know what changes have you made!
And hence you have a message associated with every commit.
Isnt that simple?

Every commit has an unique id associated with it.

Push and Pull.

First lets answer this.

Where to push? To your Github Account

From where to pull? From your Github Account.

What to pull?Repositories

What to push?Folder containing the files you are working on(index.html)

Now man?What is this Github now?

Imagine Github is Google Photos.

Right now,the image/file is in your phone(any local machine).

You PUSH(Upload) it to GITHUB(google photos).
And the command is:

git push

But you need to go through the initial setup before running the command.

And there are some files that you want to PULL(download) that you had earlier uploaded to your account and are not there in your local machine right now.

So you PULL(download) the desired repo from your github account by

git pull

I think that its enough for this post.

If you have read this till here..Do give it a like and tell me in comments if you really understood or not!
Feel free to correct me if I have went wrong somewhere!
Thank you for reading!