optimized-app-with-a-working-main-memo.jsx

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

const mainStyle = {width: '100%'};

export const App = () => {
  const onMainClick = React.useCallback(() => console.log('click'), []);
  const mainItems = React.useMemo(() => ["a", "b"], []);
  const mainChildren = React.useMemo(() => <div>hi!<div>, []);
                                       
  return (
    <Main
      style={mainStyle}
      onClick={onMainClick}
      items={mainItems}
    >
      {mainChildren}
    </Main>
  );
}