Debouncing support

[radar]

Hi there, I was wondering there is a way to "debounce" async option loading with react-select. Currently, I'm seeing queries like this:

I would like react-select to only query after a 250ms typing pause. What do I need to do to make react-select do this? I have tried wrapping my function in a setTimeout, but that does not appear to do anything:

  taxons (input, callback) {
    setTimeout(function () {
      $.ajax({
        url: '/api/v2/taxons/search',
        dataType: 'json',
        cache: false,
        data: { name: input },
        success: function (response) {
          var options = response.data.map(function(taxon, index) {
            return (
              { value: taxon.id, label: taxon.attributes.tree_name }
            );
          });

          callback(null, {
            options: options
          })
        }
      })
    }, 250)
  }

[MrLeebo]

@radar You could replace your setTimeout call with Lodash's _.debounce(func, 250). Documentation at https://lodash.com/docs#debounce

[MrLeebo]

Rather, _.throttle(func, 250) is probably more appropriate for this case.

[radar]

(On my phone so bear with me)

IIRC, wrapping the asynchronous call in a denounce or throttle meant that the loading spinner remained after a page load. It's like whatever it is returning, react-select doesn't like it and so it shows the spinner instead.

Hopefully tomorrow I will get some time to get back to this code and give you some more hard data on it.

Just wanted to post this today so it doesn't look like I've fired and forgot.

On 24 Nov 2015, at 04:02, Jeremy Liberman notifications@github.com wrote:

Rather, _.throttle(func, 250) is probably more appropriate for this case.

—
Reply to this email directly or view it on GitHub.

[MrLeebo]

That's a good point, the callback function can't really be throttled.
You could try switching to Promises
https://github.com/JedWatson/react-select#user-content-async-options-with-promises

And from there you can return the same promise for repeated calls. There are a number of options that come up when I search for "debounce promises" but I can't offer any specific recommendations for you since it's not something I've tried.

[radar]

Thanks @MrLeebo, do you have an example of pairing that with debouncing?

[marcelometal]

You can use es6-promise-debounce.

<Select.Async
...
loadOptions={debounce(this.getItem, 500)}
... />

Has anyone got deBounce working?

@marcelometal version seems to lose the events, the function gets called but the menu is never populated. I assume the synthetic event is getting lost.

Any ideas?

Thanks.

[irundaia]

@grandmore I've got debouncing working. The key is to make sure that lodash's debounce method is evaluated exactly once.

Suppose you have a function fetch that retrieves the options for you and returns a Promise. You can then create a debounced version of this function like:

const debouncedFetch = debounce((searchTerm, callback) => {
  fetch(searchTerm)
    .then((result) => callback(null, {options: result})
    .catch((error) => callback(error, null));
}, 500);

This debouncedFetch function can then be passed to the Select.Async component:

<Select.Async
  ...
  loadOptions={debouncedFetch}
  ...
/>

Note that you cannot inline the debouncedFetch function in the render function of your component. If you do this, lodash's debounce would be called whenever the component is rerendered. This breaks the debounce function.

Hope this helps.

Thanks @irundaia this worked perfectly. Appreciate your help.

There is a missing bracket in your code, here is the corrected one for anyone else that needs it.

const debouncedFetch = _.debounce((searchTerm, callback) => {
  search(searchTerm)
    .then((result) => callback(null, { options: result }))
    .catch((error) => callback(error, null));
}, 500);

[jonahlau]

In case anyone runs into a similar use case to me:
I have three react-select fields within the same form and each of them had to run different debounced async functions (using lodash's debounce). I had to declare the component as a class and set the debounce in the constructor:

class TargetingPage extends Component {
  constructor(props) {
    super(props);
    this.fetchA = debounce(this.fetchA.bind(this), 450);
    this.fetchB = debounce(this.fetchB.bind(this), 450);
    this.fetchC = debounce(this.fetchC.bind(this), 450);
  }

  fetchA(query, callback) {
    const { customProp, searchFbGeoLocationTargets } = this.props;
    searchFbGeoLocationTargets(query, fbAccessToken, callback);
  }

  fetchB(query, callback) {
    const { fbAccessToken, searchFbLocales } = this.props;
    searchFbLocales(query, fbAccessToken, callback);
  }

  fetchC(query, callback) {
    const { fbAccessToken, searchFbInterests, adAccount } = this.props;
    searchFbInterests(query, fbAccessToken, callback, adAccount.providerParams.id);
  }

  render() {
    ...pass this.fetchA, this.fetchB and this.fetchC into onLoadOptions prop...
  }
}

[powmedia]

Just to add to what @MrLeebo said, _.throttle works better for me in this case than _.debounce

[danvc]

Hi @irundaia !

Is debounce the same as _.debounce (lodash)?