Improve React Performance, Contact me on : 7709330265(Whats app No)/ramkumarkhub@gmail.com
React: The JavaScript library for building user interfaces. It is maintained by Facebook, Its nothing but the automation of JavaScript.
React is famous for the fasted performance and, lowest bundle size and the very small size library.
If we follow certain React standards in the code then website loading time will be boost
How React flow works:
All React applications have a root component that branches out in a tree like formation. These components are actually functions responsible for rendering the UI. After rendering content to the user’s browser, React keeps track of user interactions and other requests to virtually re-render the UI. Then, React reconciles the differences between the current UI and the new one using what’s called a “diffing” algorithm. That way, it makes only the necessary changes to what the user sees rather than reloading content from scratch.
React Optimization:
Before you make any changes to your app, you must perform some measurements. You’ll never know if you’re making improvements if you don’t know where you started. If you suspect a certain piece of code is slowing everything down, you may be tempted to tackle it right away, but taking advantage of the React performance measuring tools will help you quantify your progress so that you know where to focus your optimization efforts.
How to Speed up React Apps:
1. React.PureComponents:
React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
Example :
import React from ‘react’;
class ListComponent extends React.PureComponent {
render() {
const { data } = this.props;
return (
<ul>
{data.map(row => <li key={row.name}> {row.name} </li>)}
</ul>
)
}
}
2. Use constant and inline elements:
React Constant Elements treats JSX elements like values, thus moving them to a higher scope and reducing calls to React.createClass. React Inline Elements achieves the same goal by converting JSX elements into the object literals they are supposed to return.
“babel”: {
“env”: {
“production”: {
“plugins”: [
“transform-react-constant-elements”,
“transform-react-inline-elements”
]
}
}
},
3. Get chunky:
A lot of developers like to bundle their frontend JavaScript code into one minified file, which is fine for smaller React apps; however, as a project grows, the process of delivering the bundled JavaScript file to the user’s browser becomes more time-consuming. webpack users can take advantage of the built-in code splitting feature to break their JavaScript into “chunks” that can be delivered to the browser as needed. The webpack docs include a detailed tutorial on code splitting
4. Use Gzip or Brotli compression:
Another way to make your JavaScript files load faster is to enable Gzip or Brotli on your web server. Both Gzip and Brotli compression can drastically reduce the client’s data usage thus improving render time. If you’re looking for the best compression results, opt to go with Brotli over Gzip.
5. Use ESLint-plugin-React:
If you don’t already use ESLint for all of your JavaScript projects, now is a good time to start. The ESLint-plugin-React is especially helpful for coding novices since it enforces best practices. Thus, using ESLint on a regular basis could improve your coding skills in the long run.
6. Use Memo:
memo() is when you expect the functional component to render often and usually with the same props. A common situation that makes a component render with the same props is being forced to render by a parent component
memo() help function component to load fast and increase efficiency level.
const MemoComponent = React.memo(function ListComponent(props) {
// only renders if props have changed
});
7. Use React.Fragments:
It allow you to add multiple children without adding any extra wrapper.
Const ListComponent = () {
return (
<>
<div>Multiple List </div>
<ul>
<li> One </li>
<li> Two </li>
</ul>
</>
)
}
