Improving performance with virtualization

[zanzlender]

Hello, I've had a problem recently where my Select had 7k+ options, which lead to unresponsiveness, lagginess, etc...

While searching for answers I found a similar issue #3128, which explained that using virtualization could solve this problem. Because of that I started to play with @tanstack/react-virtual and trying to implement it into React select.

You can see what I did in the Codesandbox I made.

I would say I'm like half way there, but I'm still having some issues:

• Although It works, I have some type errors...
• Hover animation is still sluggish
• Virtualization seems to work fine !?

If someone who knows this better than me would take a few minutes to see what I did, tell me what I did wrong or what I could improve that would be great 😁

[EDIT]
I also tried some other options. (just realized I didn't include cursor in videos... will upload again when I have time...)

Pure RS

only.rs.mp4

RS with React-window

RS.with.react-window.mp4

RS with React-virtualized

RS.with.react-virtualized.mp4

RS with Tanstack React virtual

rs.with.tanstack.mp4