Optimize performance of the React application:-
React is defined as a JavaScript library for building user interfaces. There are many ways to speed up your react application.
- Use the Production Build- If you’re facing performance problems in your React apps, make sure you’re testing with the minified production build. By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app. You can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background:
If you visit a site with React in development mode, the icon will have a red background:
-
useMemo( ) :-
This is a React hook that is used to cache functions in React, CPU-expensive functions.
Now see an example:
function App() {
const [count, setCount] = useState(0)const expFunc = (count)=> {
waitSync(3000);
return count * 90;
} const resCount = useMemo(()=> {
return expFunc(count)
}, [count]) return (
<>
Count: {resCount}
setCount(e.target.value)} placeholder="Set Count" />
</>
)
}
The expFunc results will be cached against the input when the same input occurs again useMemo will skip calling the expFunc and return the output cached against the input.
This will make the App component highly optimized. Virtualize long lists:
If you render large lists of data, it is recommended that you render only a small portion of the datasets within the visible viewport of a browser, then the next data are rendered as the lists are scrolled called “windowing”. Awesome React libraries have been built for this, there is the react-window and react-virtualized by Brian Vaughn.Avoid Reconciliation:
React compares the newly returned elements with the previously rendered ones by comparing a snapshot of a new object with the last updated object. This way React has to update only changed nodes in React DOM
This whole process is how to React updates DOM which is called Reconciliation.
This process is way faster than Real DOM manipulation.
Even though React is clever enough to update only changed nodes. But when props and state change, re-rendering takes place which takes some time.
So we need to avoid unnecessary re-rendering for such cases.-
The Power Of Not Mutataing Data:
You should avoid object mutations and instead create a new object. The reason for this design pattern is because React will start by doing a shallow check to see if the snapshots of your state object are the same. Mutable data types like arrays and objects can be updated without creating new copies. As a result, React must traverse these structures comparing all the values to determine if a change has occurred.
The solution to this problem is to follow a more functional approach to setState ( ) updates. Strings and Numbers are non-issues as they are immutable, however, it can be tempting to update an array for example for just pushing a new value onto the end.
The following is the preferred way for updating arrays in React:
// Adding to end of array// Bad
this.state.arr.push('foo');// Good
this.setState({
arr: [...this.state.arr, 'foo']
})// Adding to middle of an array// Bad
this.state.arr[3] = 'foo';//Good
this.setState({
arr: this.state.arr.map((item, index) => index === 3 ? 'foo' : item)
})// Array deletion// Bad
this.state.arr.splice(2,1)// Good
this.setState({
arr: this.state.arr.filter((item, index) => index !== 2 )
})
5 things you need to know about React
If you are in the middle of learning it right now, you might be interested in reading this post.
1) It’s not a framework
Angular and other frameworks where some decisions are already made for you. React is just a library and you need to make all decisions by yourself. It helps you to build user interfaces.
It doesn’t help you with server communication, translations, routing, and so on. Some perceive this as a weakness. React is thin and it’s extremely easy to mix it with other 3rd party libraries.
2) JSX
If you looking at React examples you’ve seen JSX in action already. But React code can be written in plain js too.
const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h1’, {style: {color: ‘red’}},
‘The world is yours’),
React.createElement(‘p’, {},
‘Say hello to my little friend’)
)
ReactDOM.render(rootElement, document.getElementById(‘app’))
The people at Facebook came up with JSX — a “syntactic sugar for the React.createElement(component, props, …children) function”.That’s why we can refactor the above example to this:
const RootElement = (The world is yours
Say hello to my little friend
)
ReactDOM.render(RootElement, document.getElementById('app'))
During the build process, Babel will transpile the markup to plain JS.
3) It’s declarative
In React you can use declarative style to write your components.
{somearray.map(element =>
{element.text}
)}
In this example you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.
4) You separate the concerns
In React you keep HTML, JS, and often CSS together as a component. You also split JS, HTML, and CSS into different files. “If you keep HTML and JS in separate files you can easily replace the HTML and keep the JS intact”. It doesn’t work that way if you think about it. Most changes to the HTML structure require refactoring of JS logic.
5) State
It’s needed to create a stateful component where the state is changing over time.
const InputBox = React.createClass({
getInitialState () {
return {
text: ''
}
},
changeText (event) {
this.setState({text: event.target.value})
},
render () {
return (
placeholder='text' value={this.state.text} />
{this.state.text}
)
}
})
The state update will be scheduled and the component will re-render when it’s done. setState() call needs to be used to inform React about pending state change so it can apply the changes.
Asif Hasan Irfan
I'm a junior web developer. JavaScript is my favorite programming language. As a programmer, I love taking on challenges and love being part of the solution.
Follow
Your journey starts here.
Bros., Lecce: We Eat at The Worst Michelin Starred Restaurant, Ever
My 2021 End of Year Lists
Here’s my annual list of favorite books, music, and movies. Art always sustains and nourishes the soul. But for me, music and storytelling…
MONEY
Sorry, but the Mother of All Crashes Is Coming and It Won’t Be Fun
MATH
The Shortest Scientific Papers Ever Published
React
React Performance
More from Nazma Khatun Nishe
Follow
I'm a junior web developer. JavaScript is my favorite programming language. As a programmer, I love taking on challenges and love being part of the solution.
Latest comments (0)