[React] Use React.memo with a Function Component to get PureComponent Behavior

A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This behavior of the HOC is similar to what you’d get when using React.PureComponent or shouldComponentUpdate in a React Class Component. However, now with the introduction of React.memo, you can leverage this behavior for React Function Components. The end result is that React will skip rendering the component if the props have not changed and will reuse the last rendered result.

 

To prevent extra rendering, we can use 'shouldComponentUpdate' in the past, new API 'React.memo' is a high order component which is doing the same things with cleaner API:

const Greeting = React.memo(({ text }) => {
  console.log("I'm in Greeting");
  return <h3>Hello, {text}!</h3>;
});

If the 'text' prop doesn't change, then the Greeting component won't be re-rendered