Large data options in Select

[rugged valley]

Is there any way to properly display 10k+ rows of data in a Select component? When data is too large, the Select component becomes laggy.

[pulsar holly]

10k rows of data is a lot, I assume this is more than the recommended 128kB page size? (I know Next uses max 128kB to prevent performance issues because the data needs to be parsed.)

[novel spear]

you need to make a custom component for this, thankfully it isn't too hard

i made one recently with 223,000 select options

https://i.gyazo.com/b092575b68a8098f0ae5cdadd97c38f5.gif

it works with react-window to virtualise the options

generating a lot of results in js is usually pretty quick, but mounting is not performant

so you use a virtualisation library to only mount what you need

here's a code example i made when studying how to do the implementation @rugged valley
https://codesandbox.io/s/mantine-menu-virtualisation-jw2iq4

if react-window isn't too your liking, there are a lot of other libraries you can try, @dull garden sent me a big list

So the ones that I tried were.
https://github.com/TanStack/virtual
https://github.com/bvaughn/react-window
https://github.com/bvaughn/react-virtualized
https://github.com/caseywebdev/react-list
https://github.com/jaredLunde/masonic
https://github.com/jaredLunde/mini-virtual-list
https://github.com/petyosi/react-virtuoso

They all had their own issues. So for me, it's a case of going through each one and finding which satisfies the use case.

[rugged valley]

the data is resulted from an API call

@novel spear woah man, thanks a lot