pure-components-missuse.jsx

const Main = React.memo(({onClick, style, children, items}) => {
  const content = getContent({items});
  return (
    <div style={style} onClick={onClick}>
      {content}
      {children}
    </div>
  );
})

export const App = () => {
  return (
    <Main
      // Main will always re-render because "style" is always
      // a new object so *prevProps.style !== nextProp.style*
      style={{width: '100%'}}
      
      // Main will always re-render because "onClick" is always
      // a new function so *prevProps.onClick !== nextProp.onClick*
      onClick={() => console.log('click')}
      
      // Main will always re-render because "items" is always
      // a new array so *prevProps.items !== nextProp.items*
      items={["a", "b"]}
    >
      {/* Main will always re-render because "children" is always a new */}
      {/* React Element so *prevProps.children !== nextProp.children* */}
      <div>hi!<div>
    </Main>
  );
}