1

I have an autocomplete form that receives a list, I would like that when I type in the search field every time I insert a letter the previous call is canceled and continues with the new call, I have tried with throttling but nothing to do ... I am using react with mui how could I do?

this is my function:

const myFunction= throttle(350, false, (value) => {
  axios.get(url, {
    params: {
      q: value,
    }
  })
  .then((response) => {
    doSomething(response.data);
  })
})

I would like to achieve this result enter image description here

Thank you so much

amepro
  • 43
  • 7

2 Answers2

-1

Call the function when length of value is greater than equal to 2.

I misunderstood the question earlier. I am editing my original answer:

There are few ways to approach this:

  1. Use third party lib like RTK-query or react-query. They provide functions like cancel, pause & resume to interact with queries. You can use this feature to cancel last query/mutation.
  2. The second one is manual approach and I assume above libraries use the same technique. You can use AbortController to replicate the same result.
Abhishek Badhan
  • 19
  • 7
  • Ok but how can i delete/stop the previous api call? – amepro Feb 10 '22 at 18:09
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 11 '22 at 00:53
  • 1
    i added a screenshot – amepro Feb 11 '22 at 08:57
  • if it is react i would suggest some third party lib like react-query, or rtl-query they provide functions to pause/resume/disable queries. – Abhishek Badhan Feb 12 '22 at 06:29
-1

that's the diff between debounce and throttle

Try changing for debounce, you will complete at least one request in the bunch of events

guiwme5
  • 712
  • 6
  • 10
  • I have already tried with the debunce but I do not get the desired result, I have attached a screenshot to my initial post – amepro Feb 11 '22 at 09:02
  • try it again, and please show more code in order to receive a better help. The cancellation of the request should not be something that happen alone, check if your are doing some Cancellation. With debounce you will wait for a little delay to merge the bunch of repeated events and act like if were just one event. So in the input if you write fast and continuously you will merge it into one event with your word on it. Debounce is the best fit for SearchBar or Autocompletes. https://dev.to/danilo95/react-autocomplete-search-input-debounce-2mof and this: https://usehooks.com/useDebounce/ – guiwme5 Feb 11 '22 at 14:02
  • and check how to cancel a request with axios, https://masteringjs.io/tutorials/axios/cancel the cancel can be made by any custom flag either if you use redux or even redux-saga let you controlling this with the saga effects, but for this case I don't see the reason to cancel the request, what you should try is to get the most latest results just that, but if you see an overriding results from the old one, then yes, canceling would be the fix. – guiwme5 Feb 11 '22 at 17:07
  • the problem is that when I go to click in the autocomplete field the call starts to get all the results, what it should do is that when I start writing it must cancel the call it was making (on click) and start the new one with the search query @guiwme5 – amepro Feb 14 '22 at 09:21
  • 1
    that is usual, you shouldn't be concerned about the resources unless it is too expensive calculations before accessing the db. Please, check here how to cancel your request. https://www.codingdeft.com/posts/axios-cancel-previous-request-react/ – guiwme5 Feb 15 '22 at 04:31