Optimizing Dropdown Performance for Large Datasets: Addressing Slow Rendering and Lag in react-dropdown-select

[Mohitb07]

Issue Description:
I'm encountering a performance issue specifically with the react-dropdown-select component, even when using it both with and without the react-virtualized library. Despite attempting different configurations, I'm facing a noticeable delay in my application.
I'm baffled by the behaviour, especially considering that a simple HTML <select> tag performs flawlessly without any delay.

Problem Details:
In my use case, I'm working with a dropdown containing approximately 4000 items. Strangely, whether I incorporate the react-virtualized library or not, the problem remains consistent. When opening the dropdown, there is a delay of 2-3 seconds, impacting the user experience and making the interaction feel sluggish.

Expected Behavior:
I expected that by using the react-dropdown-select component, the dropdown's performance would be smooth and responsive, even with a dataset of 4000 items. Regardless of whether react-virtualized is utilized or not, the dropdown should open swiftly and provide a seamless user experience. An HTML <select> tag, however, operates smoothly without any perceptible delays.

Steps Taken:

1. Employed the react-virtualized List and AutoSizer components, following recommended practices.
2. Adhered to official guidelines for implementing the react-dropdown-select component.
3. Thoroughly reviewed my codebase for potential performance bottlenecks, but the issue persists.

Additional Context:

• Platform Environment: Windows 11
• React Version: 18.2.0
• Library Versions: react-virtualized 9.22.5, react-dropdown-select 4.10.0

This perplexing issue is specific to the react-dropdown-select component itself, as evident from the fact that a simple HTML <select> tag exhibits none of the delays experienced in the dropdown. I'm actively seeking assistance to uncover the root cause of this issue and implement a solution that ensures a seamless and quick dropdown interaction. Any insights or suggestions are highly appreciated.

[sanusart]

Does it also happens on the demo page for you?

https://react-dropdown-select.netlify.app/examples#Windowed-(20000-items)

[Mohitb07]

Does it also happens on the demo page for you?

https://react-dropdown-select.netlify.app/examples#Windowed-(20000-items)

No, it's working fine on the demo page. It only gives me a problem when I use the code from the demo.

A multi-value dropdown is used in the demo, but I am only using a single-value dropdown without the multi prop. This should not cause any issues.

[sanusart]

Can you try to use the exact code from the demo source on your page and see how it behave