We can improve the performance of React App just by simply avoiding component re-renders. A wasted render happens when a component is rendered with the exact same input data and gives exactly the same output. If you are familiar of replacing React.Component with React.PureComponent, lets assume props are immutable and not nested deeply.

For functional components we can optimize re-renders as they’re just functions. By using recompose and the onlyUpdateForKeys HOC, functional components would assume the same behaviour as PureComponent but behind the scenes it’s just wrapping the Functional Component in a React Class.

Here React.memo helps to prevent a re-render, is it ? not exactly!
React.memo works differently as it does not prevent a re-render but just memoizes the result of a function call if the same arguments were passed.

React.memo and PureComponent both are same, they has the props are shallowly compared ( shallow =  it compares by reference and not value)

Above example, if we pass name and price details as props to above component, every time it renders it will check those values, if name and price are same like previous render, the result of that function call will be returned from cache, which means this component returns same JSX and it doesn’t need to recalculate the JSX again.