React.memo

React.memo — Is a higher order component, similar to React.PureComponent but for function components instead of classes.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.