React.memo

A higher-order component that memoizes the rendered output. Prevents re-render if props have not shallowly changed.

Syntax

react

const MemoComponent = React.memo(Component, arePropsEqual?)

Example

react

const ExpensiveChild = React.memo(({ data }) => {
  return <div>{data.map(d => <Item key={d.id} {...d} />)}</div>;
});

// Only re-renders if `data` reference changes