I would like to improve component performance but after analysis of many components I got to know there is a very huge amount of re-rendering is going on with each component, is there any way to reduce the re-rendering of components in React?

CodePudding user response：

There are multiple ways to try to avoid re rendering the component .

1. React.memo or React.PureComponent (Best way) find out more detail on https://dmitripavlutin.com/use-react-memo-wisely/
2. Make sure property values don't change
3. Passing objects as props
4. Using keys to avoid re-renders
5. Avoid changes in the DOM tree structure

you can find out more details on https://www.debugbear.com/blog/react-rerenders

CodePudding user response：

If you’re using a React class component you can use the shouldComponentUpdate method or a React.PureComponent class extension to prevent a component from re-rendering. In functional component, use can use React.memo()

Memoization a React functional component with React.memo()

Memoization is an optimisation technique. It’s primarily used to speed up computing by story the result of a function and returning the cached result, when the same inputs occur again. Following is an example of using React.memo()

const Greeting = React.memo(props => {
  console.log("Greeting Comp render");
  return <h1>Hi {props.name}!</h1>;
});

function App() {
  const [counter, setCounter] = React.useState(0);

  // Update state variable `counter`
  // every 2 seconds.
  React.useEffect(() => {
    setInterval(() => {
      setCounter(counter   1);
    }, 2000);
  }, []);

  console.log('App render')
  return <Greeting name="Ruben" />
}