Debouncing support

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)
  }

[paulirwin]

A built-in debounce prop on the Async component would be a very welcome change.

[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.