New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[bug]: Very slow selection with a large amount of elements #3590
Comments
The slownest is coming from rendering to much HTML that any browser can handle fast, when rendering a huge list you might want to consider using some Virtualization library, the way these library works is by rendering only the needed elements within the view it self and as you scrolling it deletes the items the isn't in the view and add new HTML elements which is within the current view. I made an example where I wanted to select an item in ### 1000 elements list: Without Virtualization the browser had to load all the HTML content:without.mp4With Virtualization the browser had to load only the screen view HTML content:with.mp4Here is a code example: Then in your Select component you need to hide scroll icon button:
Then in the SelectContent you need to wrap the items within "FixedSizeList" from "react-window":
I've used random data generation to genrate a 1000 items for testing the code: Full Code Example:
|
@OmarAljoundi Thank you, its works for me!! |
Describe the bug
I use select to output a large number of items, there can be around 1 thousand and even sometimes more than that
When I press select to get a dropdown list, on my device it takes about 3-4 seconds before the list of options appears on the screen. With native select everything works instantly
Affected component/components
Select
How to reproduce
Here is the code for my component
Here is what the postOfficeListToSelect array looks like
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting
The text was updated successfully, but these errors were encountered: