I have 30,000 rect to draw, and the page is too slow. can anyone help me?

landData.length = 30000

<Group>
            {landData.length > 0 ? (
              landData.map((rectInfo: RectInfo) => {
                return <ColorRect key={`${rectInfo.key}`} rectInfo={rectInfo} onItemClick={onLandClick} />
              })
            ) : (
              <></>
            )}
            {mark}
</Group>

and about {mark}, first click i add Rect to mark, if i click it again, i have to remove it from group, can i implement it?

[lavrton]

I am not certain if it will be simply possible to handle that much. Probably you should try direct 2d canvas API and just draw with it, without react and Konva abstractions.

[weixuefeng]

@weixuefeng how did you use react-virtualized to solve this?

yes. you can try it. https://github.com/bvaughn/react-virtualized or https://github.com/bvaughn/react-window