[Feature] built-in debounce support on async select

[mmuller99]

#3075
Proposal

loadOptions is debounced by prop debounceInterval, minimizing unnecessary calls.
Initial load unaffected.

Example:

loadOptions only called after 250 milliseconds

<AsyncSelect 
      defaultOptions
      loadOptions={loadOptions}
      debounceInterval={250}
/>

[dustinsoftware]

@mmuller99 pretty cool, but this seems to introduce a new problem when mixing Async with Creatable: The "New entry" indicator flashes briefly before the search happens. GIF recording below:

[mmuller99]

@dustinsoftware thanks for the feedback. I have a feeling its to do with "allowCreateWhileLoading", will have a look.

[mmuller99]

So yes, setting

allowCreateWhileLoading={false}

stops the behaviour as expected. Not too happy with forcing to false on debounceInterval passed though

EDIT: Scratch that, seeing different things with different prop combinations. Will have a good look when I find time

[dustinsoftware]

It looks like the problem can be avoided by debouncing the loadOptions method instead:

constructor(props: Props) {
	super();
	this.loadOptions = props.debounceInterval
		? debounce(this.handleLoadOptions, props.debounceInterval)
		: this.handleLoadOptions;
}

handleLoadOptions = (inputValue: string, callback: (?Array<*>) => void) => {
	// same method contents, but the method name is renamed to avoid confusion
};

handleInputChange = (newValue: string, actionMeta: InputActionMeta) => {
	// other logic
	this.setState(
		{
			inputValue,
			isLoading: true,
			passEmptyOptions: !this.state.loadedInputValue,
		},
		() => {
			this.loadOptions(inputValue, options => {
				if (!this.mounted) return;
				if (options) {
					this.optionsCache[inputValue] = options;
				}
				if (request !== this.lastRequest) return;
				delete this.lastRequest;
				this.setState({
					isLoading: false,
					loadedInputValue: inputValue,
					loadedOptions: options || [],
					passEmptyOptions: false,
				});
			});
		},
	);
}



render() {
	return (
		<SelectComponent
			// other props
			onInputChange={this.handleInputChange}
		/>
	);
}

[gsinovsky]

any chance on an update on this? glad to help if needed @mmuller99

[mmuller99]

@dustinsoftware thanks for the pointer, I debounced the loadOptions instead.

It's been expressed by the owner that he wants the debounce implementation left to the user here.

Maybe one of the collaborators can express their opinion on this PR?

BTW, @gsinovsky thanks!

[gsinovsky]

Hi @JedWatson, any chance on reviewing and merging this?

[mmuller99]

@gwyneplaine any feedback?

[gsinovsky]

@JedWatson @mmuller99 still very interested in seeing this merged and published.

[gwyneplaine]

@mmuller99 definitely haven't forgotten about this PR, will be looking into this more deeply as part of our work to refactor async select. Will have a deeper look at this as soon as I have more time on my hands :) thanks for your patience

[chrysb]

Strong +1 to this feature request

[filippoitaliano]

There's a plan to merge this feature soon?

[ramospedro]

This is just what I need in my current project!
Any news on this?

[bluefire2121]

It's nearly November 2019...is there an update yet?

[gsinovsky]

Please! Let it be one Gustavo Siñovsky Software Engineer

…

On Mon, Oct 28, 2019, 22:27 bluefire2121 ***@***.***> wrote: It's nearly November 2019...is there an update yet? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3254?email_source=notifications&email_token=ABNBREMUQ3ZHTPOFFACGOOLQQ6GQZA5CNFSM4GILI662YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECO5RKI#issuecomment-547215529>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABNBRENZQPLR2A7TUZHB5FTQQ6GQZANCNFSM4GILI66Q> .

[changeset-bot]

⚠️ No Changeset found

Latest commit: df41e7f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[hnhegde]

Any update on this PR? After using AsyncSelect, it is apparent that debounce must be a necessary accompaniment to AsyncSelect.

[JoeDuncko]

Any updates? This is 100% a required feature for async select.

[papaiatis]

It's a long awaited async feature for react-select! Would be great to get it merged now.
@gwyneplaine could you post an update to this community please?

[zheskiel]

this feature is really needed

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit df41e7f:

Sandbox	Source
react-codesandboxer-example	Configuration

[balazs-endresz]

FWIW, this can be also done currently with a function that takes a promise and returns a debounced promise (but not with any ordinary debounce functions): https://gist.github.com/balazs-endresz/c0c814a513724f44d90265422b9ae530 Call this outside a component or with useCallback and pass the result to loadOptions. And I think we've had issues with cacheOptions as well, so optionally this does something like that too.

[khaphannm]

Any updates???????? Really needed :D

[dustinsoftware]

Make a fork and build it yourself?

…

On Tue, Oct 13, 2020 at 8:37 AM, Minh Kha ***@***.***> wrote: Any updates???????? Really needed :D — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3254 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHGCFQ44GWBNL63OV3LIOTSKRX3XANCNFSM4GILI66Q> .

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this PR on the fork and we can get it merged and released.

EDIT: 🎉 I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[ochov1]

#3075
Proposal

loadOptions is debounced by prop debounceInterval, minimizing unnecessary calls.
Initial load unaffected.

Example:

loadOptions only called after 250 milliseconds

<AsyncSelect 
      defaultOptions
      loadOptions={loadOptions}
      debounceInterval={250}
/>

this is not working at all, there is some other workaround?

[ebonow]

Greetings,

@JedWatson has expressed the following opinion #473 (comment)

Thanks for the PR but I'd prefer this was left for users to implement in the function that's passed to loadOptions

You can do this really simply by wrapping the method in lodash's debounce method (or similar) without adding any more logic to react-select

For those looking for a solution, please feel free to try the solution suggested here: #614 (comment)

const loadOptions = React.useCallback(
  debounce((inputValue, callback) => {
    getOptions(inputValue).then(options => callback(options))
  }, 500),
  []
);

return <AsyncSelect loadOptions={loadOptions} {...otherProps} />

Demo: codesandbox

[JedWatson]

Hey everyone, and thanks for the PR @mmuller99

Sorry for the lack of comms here, below is my response but I also want to acknowledge that this should have been said much earlier.

My view on this is that it is something you can (reasonably) easily do outside of react-select when you need it, and many libraries exist already specifically to make debouncing function calls easy.

As we've seen from the challenging history maintaining the library, even simple features add to the already huge surface area so the bar for inclusion of anything that can be done "in user-land" is really high.

However talking through it with @ebonow and @Methuselah96 in our maintainers sync this week, the combination of these points have gotten it over the line:

• How often would you use Async and not want to debounce? It seems like the answer is "not often"
• There is a really high level of community support for adding this
• The additional feature is just scoped to the Async component

We're in the middle of our TypeScript conversion now (#4489) so this PR won't go in directly, but we'll backlog adding this for a post-5.0 release

[mmuller99]

Thank you @JedWatson , appreciate the honest response and that native debounce, finally, has reached the roadmap.

[thinhbg2812]

Greetings,

@JedWatson has expressed the following opinion #473 (comment)

Thanks for the PR but I'd prefer this was left for users to implement in the function that's passed to loadOptions
You can do this really simply by wrapping the method in lodash's debounce method (or similar) without adding any more logic to react-select

For those looking for a solution, please feel free to try the solution suggested here: #614 (comment)

const loadOptions = React.useCallback(
  debounce((inputValue, callback) => {
    getOptions(inputValue).then(options => callback(options))
  }, 500),
  []
);

return <AsyncSelect loadOptions={loadOptions} {...otherProps} />

Demo: codesandbox

i tried this but, the options won't be re-render when the data is ready
any solution for this sir ?

[ebonow]

With version 5 out, I think we are in a position to pick this up if someone is willing to put in the work to have this work converted to the new TypeScript rewrite.

It seems reasonable that this is only applied to AsyncSelect and not Select correct?

[lvidal1]

Hi, is there any update on this?

[dcousens]

The pull request as written doesn't have consensus, and I think for now the recommendation of debouncing the loadOptions call yourself is transparent and straight forward for anyone to write themselves.

The feature isn't forgotten, but for now, I'm going to close this pull request.