Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use React.lazy warp function, wdyr not work. #268

Open
m5ultra opened this issue Feb 19, 2023 · 0 comments
Open

use React.lazy warp function, wdyr not work. #268

m5ultra opened this issue Feb 19, 2023 · 0 comments

Comments

@m5ultra
Copy link

m5ultra commented Feb 19, 2023

image

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant