React-autosuggest: configure debounce delay

[loopmode]

It would be great if we could configure the debounce delay time. Currently, it is hard-coded as 100ms, in Autosuggest.js ~line 63:

this.suggestionsFn = debounce(props.suggestions, 100);

This can generate unnecessary load on the servers and I personally would like to set it to ~500ms for our particular project.

I can create a PR if you don't have time for this, but consider it as useful as I do.

[moroshko]

@loopmode I agree, it needs to be configurable. PR is welcome!

[loopmode]

basically an easy task, kind of finished. I struggle with getting an example running and line endings tho :) Hope i find time for a proper PR soon

[moroshko]

@loopmode In 3.0, debounce is not part of react-autosuggest anymore. Check out this example to see how to implement debouncing.

[avindra]

@moroshko : Your link does not work. Is there a way to debounce in the latest version?

[avindra]

To answer my own question, I was able to use lodash to debounce:

const debounce = require('lodash.debounce');

...
    this.onSuggestionsUpdateRequested = debounce(this.onSuggestionsUpdateRequested.bind(this), 300);

Something like that should work for you :+1:

[moroshko]

@avindra Sorry for the broken link, I fixed that. Have a look at this example.

[maksimgm]

@moroshko Really useful. Thank you for the demo link. You're a life saver :)
I no longer see this listed as a new feature. Are you still looking to configure this in future versions? I'd love to contribute

[markusdosch]

Note that for autosuggestions, lodash's _.throttle might often be a better fit instead of _.debounce.

debounce will wait with invoking this.onSuggestionsUpdateRequested until the user has stopped typing. If a user is typing a long query, he will only get auto-suggestions when he pauses typing or has finished typing. => So that wait milliseconds have passed since the last keystroke.

What you more likely want is the that this.onSuggestionsUpdateRequested does get invoked while the user is typing, but not too often, i.e. not on every keystroke. The throttle method offers exactly that. this.onSuggestionsUpdateRequested will get invoked at most every wait milliseconds.

See lodash's documentation on throttle for a more detailed description and this blog post for an in-depth comparison between debounce and throttle.

So I would rather suggest something like:

this.onSuggestionsUpdateRequested = throttle(this.onSuggestionsUpdateRequested.bind(this), 500);

[danwild]

For anyone wanting to do this with REDUX, and unsure where to add - I throttled the dispatch function (I'm using underscore), e.g.

function mapDispatchToProps(dispatch) {
  return {
    onSuggestionsFetchRequested: _.throttle(
      ({ value }) => {
        dispatch(loadSuggestions(value));
      },
      500,
      { leading: false }
    )
  };
}