React.JS Performance Boost Overall - reactjs

Question

What would be some general tips & tricks you personally know and tested that work for improving performance in a React.js component ?

Answer 1

Personally the best tip I could provide is to avoid writing logic that updates your component-state to frequently. You do not want your component to constantly be calling this.setState({}) because it creates a sort of distorted lag which may affect your application both visually and performantly.
Definitely avoid writing stuff like:
componentDidUpdate(){
this.setStatE({
field: this.props.newData
})
}
But while also on that topic, make use of your lifecycle methods, particularly componentDidMount() and componentDidUpdate() these are incredibly useful for controlling logic inside your component. In a way they can also enhance your component by giving it a sort of breathing mechanism for processing data.
Lastly, this is more-so a preference, but if you want to have good code-readability, I would suggest creating a function to generate your mark-up instead of writing it directly inside your render-method.
Considering the following code:
import React from "react"
class Example extends React.Component{
state = {
tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
}
render(){
const tests = this.state.tests
return(
<div>
{ tests.length > 0 && tests.map((test) => {
return <div>{test.name}</div>
})}
</div>
)
}
}
This code is perfectly fine as is, but you can make it easier to read for someone else just by making another function for your mark-up.
Revised:
import React from "react"
class Example extends React.Component{
state = {
tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
}
createTests = () => {
const tests = this.state.tests
if(tests.length > 0){
return tests.map((test) => {
return <div>{test.name}</div>
})
}
}
render(){
const tests = this.state.tests
return(
<div>
{this.createTests()}
</div>
)
}
}
Does the same thing, but now it's very clear what we're trying to accomplish inside our render method.

Answer 2

There are couple of things we have implemented.
We used one plugin to figure out how many wasted render we have and this was 60 %.
To address this there are couple of things we have done.
1.We can use life cycle hook up to figure out is there any change in property.
2.Minimize the parent child relation ship between component.
3.If we are using any kind of redux to manage the state then we should be having top level component connected to store and pass the data as props to child component.
4.for Asyc call care should be taken to place if we want it in compoentDidMount or ComponentWillmount as if the data of asyc call is required in child component or not.

Answer 3

There are many options to optimize your React Application, too much to cover on one answer. My advice here is, start you App, open DevTools and go to Audit, start the Lighthouse test. The Test will show certain actions which can be done to optimize your code and also ressources to read about.
If you have more concrete questions ask then. Your current question is kinda too much to cover in one answer. Or post code, which you want optimized.