Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async loadOptions doesn't get recalled after receiving new props

See original GitHub issue


I have an API that only gives me more data after the initial render of my React application. Imagine initially in my app component I have this.props.activeItemId as null. Then when the extra data fetches, it rerenders my app with this.props.activeItemId as 2499.


Using Select.Async and loadOptions I can do a custom filter of the options I want, based on the query. The custom filter I am implementing is based on the value of this.props.activeItemId (so that I can always include it in the filtered options to show up as the selected option at the top of the option results). Like so:

render () {
    return (
       <div className='SomeDiv'>
           filterOptions={false} /* using a custom filter */

getItems (query, callback) {
  let options = this.someCustomFilter(query)
  return callback(null, { options })

someCustomFilter (query) {
  let result = this.props.items
  result = someFilterBasedOnQuery(query)
  result = _.take(result, 20)
   * When an item is active that isn't contained in the most relevant 20
   * we want to include at the top of the options, so it can appear as active
  if (!query || query === '' && !_.findWhere(result, {id: this.props.activeItemId})) {
    result.unshift(_.findWhere(this.props.items, {id: this.props.activeItemId}))
  return result


When Select.Async receives a new props on rerender, it doesn’t re-call loadOptions again, with the new props (activeItemId 2499) so I end up with a select box, with no active item, since the filtered options aren’t up to date.


I made this PR in my own fork to show you the proposed change to ‘react-select/src/Async.js’

Please let me know if you think the solution is valid, if so, I can PR it against this repo (I just didn’t want to pollute your PRs). The change doesn’t break current tests.

Thanks for any help!

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:13
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

helmarluizcommented, Dec 28, 2020

This works for me:


Example working:

bladeycommented, May 28, 2020

Hello -

In an effort to sustain the react-select project going forward, we’re closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren’t using the latest version of react-select please consider upgrading to see if it resolves any issues you’re having.

However, if you feel this issue is still relevant and you’d like us to review it - please leave a comment and we’ll do our best to get back to you!

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Select Async loadOptions is not loading options properly
So i am posting my update portion of code that fix the issue. Converting from async-await to normal callback function fix my issue....
Read more >
react-select-async-paginate - npm
Async function that take next arguments: Current value of search input. Loaded options for current search. Collected additional data e.g. ...
Read more >
Async - React Select
Async. Use the Async component to load options from a remote source as the user ... The loadOptions prop allows users to either...
Read more >
Teamcenter Integration for CATIA V5 (12.0.1) Installation Guide
What's New. Getting Started. Installation Prerequisites. The Installation Process. Configuration. Customization. Integration Entry Points.
Read more >
USER MANUAL V1.16 Béta - Evi Audio
Getting Started: This shows you how to set up and power up a HD96-24 System. ... POPulation Group – A group of channels...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found