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
2 Answers, 1 is accepted
Rank 3
Iron
Iron
Veteran
@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
Rank 1
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.