React Hook function Component prevent re-render

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

export default Chat   
//This worked for me

You can use React.memo and render when prop change

function MyComponent(props) {
  /* render using props */
}

function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

or

shouldcomponentupdate if class component

shouldComponentUpdate(nextProps, nextState)

Note: This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top