How to optimise React Native App Performance in terms of preventing component re-rendering again and again

Question

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?

Answer 1

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, you 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" />
}