TreeSelect filter performance too slow when user is typing

[A-Posthuman]

Describe the bug

In my app, I have a TreeSelect with over 20k keys, and I've noticed when using the filter mode that when you type the first couple of characters to search for that the performance is very laggy. However after typing the first 3 or 4 characters it speeds up, as the number of selected nodes decreases dramatically, and becomes quite ok when the user has typed 5 or more characters or a word.

I've also seen other instances of TreeSelect components on the web (not PrimeReact ones, from other component providers) where the filter will wait a small configurable amount of time (milliseconds) while the user is typing the search term before the component attempts to do the filtering. This works a lot better in terms of performance, it allows the component to remain responsive to the user while typing, and by waiting until they've typed several characters and stopped typing then the filter search can be executed much faster since fewer tree nodes will be selected.

Could this slight change of adding a configurable delay before doing the filtering be implemented? Thanks!

Reproducer

No response

PrimeReact version

10.6.6

React version

18.x

Language

ES6

Build / Runtime

Vite

Browser(s)

All

Steps to reproduce the behavior

No response

Expected behavior

No response

[KirilCycle]

"TreeSelect" and "Tree" do not have their own "debounce" logic and the glitch does not depend on the number of characters entered. I have seen "useDebounce" in the hooks folder, should I try to implement this logic directly in "Tree"? However, "TreeSelect" uses its own input filter, which means that the implemented debounce inside "Tree" will not work, and it may be difficult to solve this problem. @melloware what do you think ?

Note that "Tree" currently has the same issue as "TreeSelect", but it can be fixed by using custom input and manually controlling changes to the filterValue.

[melloware]

we should try and use the useDebounce hook when possible in the components.

[A-Posthuman]

Possibly related is I've also noticed with the TreeSelect that it gets increasingly slow to update using the checkbox mode with > 20k nodes, when the user checks a few of the top level nodes that in turn result in many hundreds or thousands of child nodes switching to checked, even if those child nodes aren't visible in the browser. It seems there is some internal logic of the component causing increasing slowdown once a lot of nodes become checked/partialChecked.

[KirilCycle]

we should try and use the useDebounce hook when possible in the components.

I couldn't find the component where the hook is used. Should I try to useDebounce in "TreeSelect"? This may solve the problem, but the Tree itself will have the same problem

[belgattitude]

Is there virtual scrolling support for the tree ?