use React.lazy warp function, wdyr not work.

[m5ultra]

import { Button } from 'antd'
import { useState, lazy } from 'react'
// import BigListPureComponent from './32.1.BigListPureComponent' // wdyr work
const BigListPureComponent = lazy(
  // wdyr work
  async () => await import('./32.1.BigListPureComponent')
)

export const Test = () => {
  const [count, setCount] = useState(0)

  /* use the hook instead of the const to prevent
   ** "BigListPureComponent" from re-rendering wit this component */

  // const bigListStyle = React.useMemo(() => ({ width: "100%" }), [])

  const bigListStyle = {
    width: '100%',
  }

  return (
    <div className="Main">
      <h1>Big List (Main Demo)</h1>
      <p>
        Open the console and notice how the heavy list re-renders on every click
        on Increase! even though its props are the same.
      </p>
      <div>
        <Button
          onClick={() => {
            setCount((c) => c + 1)
          }}
        >
          Increase! Count: {count}
        </Button>
      </div>
      <BigListPureComponent style={bigListStyle} />
    </div>
  )
}

import { memo } from 'react'
import { times } from 'lodash'
const BigListPureComponent = memo(({ style }: { style: Object }) => {
  console.log(
    "BigListPureComponent Re-Render! - We don't want this to happen too often."
  )
  return (
    <div style={style}>
      <h2>BigListPureComponent</h2>
      <div>
        {times(1000).map((n) => (
          <div key={n}>Element #{n}</div>
        ))}
      </div>
    </div>
  )
})

BigListPureComponent.displayName = 'BigListPureComponent'

export default BigListPureComponent