search

sanusart / react-dropdown-select

Customisable dropdown select for react
https://react-dropdown-select.netlify.app/
MIT License
349 stars 83 forks source link

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

Open Mohitb07 opened 12 months ago

Mohitb07 commented 12 months ago

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:

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 commented 12 months ago

Does it also happens on the demo page for you?

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

Mohitb07 commented 12 months ago

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 commented 12 months ago

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