How to debounce onFilterChange for KendoReact Combobox (server-filter)

[Grant]

Hi Team, 

I have a ComboBox that and my use case is that when a user types into it, it will send a request to a server to get the search results and set the data, for the user to then select. So a server filter, kind of.

The problem is that onFilterChange is triggered on each keypress which in turn sends a request to the server each time. I would like to debounce the request to the server until the user has stopped typing, but I cannot find a debounce function that works. I know how to use useEffect and useRef, but the refVarialbe.current doesnt update on filterChange, only on value change. Which is not my use-case.

Attempts: https://stackblitz.com/edit/react-pht5mn?file=app%2Fmain.jsx

Has anyone had any success with this?

Please advise.

Thanks,
Grant

[Grant]

@Stefen, 

 

Thanks for helping me out with this. Your answer is a bit more complicated than needed by including paging & data caching.

 

But I managed to figure out what you are getting at and I was able to use it to build this stripped down version.

 

Thanks and Kind regards,

Grant

[Tye]

Thank you for sharing your work. It was very helpful as I had the same situation.

[Stefan]

Hello, Grant,

Currently, we have this example that shows how to limit the requests. The idea here is to make a request only when there is no other request waiting. This will still make more requests, not only one when the user stops typing:

https://stackblitz.com/edit/react-v9s5jp?file=app/main.jsx

For the debounce on the onFilterChange, we have to monitor when the user types during the onFilterChange event, and if there is X amount of times passed after the last time the event is fired, we can send the request.

Regards,
Stefan
Progress Telerik