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.