Woking process and Optimization of React.js

How A React App Works Under Hood

Do you know a react app is not created with only react? There is a part of react. Actually a react project is combined with some tools that works together like babel, node, npm, jsx, webpack. As a beginner, I just try to simply describe how react works.

Tools with react.js

1. Babel is a javascript transcompiler that transcompile ECMAScript 2015+ code into a backwards-compatible version of JavaScript. So, react uses babel to transcompile es6 to es5 so that browser can understand.
2. Babel also transcompile jsx to react doc element using react-preset.
3. Npm manage packages and also running commands and Node allows js code to run

4. Node allows all javascript code to run

5. Webpack is a bundler that helps you to handle your resources.

By using these tools react actually works creating virtual-dom. Now, I explain it with an example.

const user = {
name: 'Luffy',
age: '33',
}

Now, we create a template using jsx where we use this object

const jsx = (
<div className="user">
<h2>{name}</h2>
<p>{age}</p>
</div>
);

when react renders browser, it creates a copy of dom. This is called virtual dom. This virtual-dom compares the previous virtual-dom, if it finds any difference then it updates or renders actual browser-dom.

const user = {
name: 'Luffy',
age: '30',
}

If the age value is changed, then when creating virtual-dom it compares the previous virtual-dom. There is a difference, so it updates browser-dom.

How To Optimize Your React Project

Optimization is very important for your project. There are several techniques that react use to optimize. If your project is built with create react app then you can follow some instructions. Now, I’ll tell you about this.

Photo by James Harrison on Unsplash

Production build

When you deploy your project, use production build

npm run build

React Developer Tools

1. Install “React Developer Tools” for chrome extension.

2. You can check your project whether it’s a production build by this extension in chrome. If it shows green that means, it’s a production build either not.

Chrome performance Tab

You can visualize how components update, mount, unmount etc by using chrome performance tab.

1. Disable all chrome extensions especially react dev tools
2. Run your project in development mode
3. Open performance in chrome dev tools
4. Press record
5. Don’t record more than 20 seconds

You can realize when your UI gets updated by mistake or how often your UI gets updated, muted etc.

Try to avoid mutating data

When you write code, try to avoid mutating data. It may slow your project. Like you can use spread operator, Object.assign

function updateBox(boxColor){
boxColor.inner = 'black'
}

This code mutates or changes data.

function updateBox(boxColor){
return Object.assign ({}, boxColor , {inner:'black'})
}

But in this code, it returns a new object without mutating data. You can also use the spread operator.

function updateBox(boxColor){
return {...boxColor, inner:'black'}
}

If you think it’s a little bit useful to you, then don’t forget to clap. Thank You.