title: React-Select Async loadOptions is not loading options properly
body: <p>React Async Select loadoption sometimes fail to loads the option. This is a very strange phenomenon after couple of set of queries react loadoptions don't load any value but i can see from log that results properly came from backend query. My codebase is totally up to date with react-select new release and using </p>
  
  <blockquote>
    <p>"react-select": "^2.1.1"</p>
  </blockquote>
  
  <p>Here is my front end code for react-async select component. I do use debounce in my getOptions function to reduce number of backend search query. This should not cause any problem i guess. I would like to add another point that i observe in this case, loadoptions serach indicator ( ... ) also not appear in this phenomenon. </p>
  
  <pre><code>import React from 'react';
  import AsyncSelect from 'react-select/lib/Async';
  import Typography from '@material-ui/core/Typography';
  import i18n from 'react-intl-universal';
  
  const _ = require('lodash');
  
  class SearchableSelect extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        inputValue: '',
        searchApiUrl: props.searchApiUrl,
        limit: props.limit,
        selectedOption: this.props.defaultValue
      };
      this.getOptions = _.debounce(this.getOptions.bind(this), 500);
      //this.getOptions = this.getOptions.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.noOptionsMessage = this.noOptionsMessage.bind(this);
      this.handleInputChange = this.handleInputChange.bind(this);
    }
  
    handleChange(selectedOption) {
      this.setState({
        selectedOption: selectedOption
      });
      if (this.props.actionOnSelectedOption) {
        // this is for update action on selectedOption
        this.props.actionOnSelectedOption(selectedOption.value);
      }
    }
  
    handleInputChange(inputValue) {
      this.setState({ inputValue });
      return inputValue;
    }
  
    async getOptions(inputValue, callback) {
      console.log('in getOptions'); // never print
      if (!inputValue) {
        return callback([]);
      }
      const response = await fetch(
        `${this.state.searchApiUrl}?search=${inputValue}&amp;limit=${
          this.state.limit
        }`
      );
      const json = await response.json();
      console.log('results', json.results); // never print
      return callback(json.results);
    }
  
    noOptionsMessage(props) {
      if (this.state.inputValue === '') {
        return (
          &lt;Typography {...props.innerProps} align="center" variant="title"&gt;
            {i18n.get('app.commons.label.search')}
          &lt;/Typography&gt;
        );
      }
      return (
        &lt;Typography {...props.innerProps} align="center" variant="title"&gt;
          {i18n.get('app.commons.errors.emptySearchResult')}
        &lt;/Typography&gt;
      );
    }
    getOptionValue = option =&gt; {
      return option.value || option.id;
    };
  
    getOptionLabel = option =&gt; {
      return option.label || option.name;
    };
  
    render() {
      const { defaultOptions, placeholder } = this.props;
      return (
        &lt;AsyncSelect
          cacheOptions
          value={this.state.selectedOption}
          noOptionsMessage={this.noOptionsMessage}
          getOptionValue={this.getOptionValue}
          getOptionLabel={this.getOptionLabel}
          defaultOptions={defaultOptions}
          loadOptions={this.getOptions}
          placeholder={placeholder}
          onChange={this.handleChange}
        /&gt;
      );
    }
  }
  
  export default SearchableSelect;
  </code></pre>
  
  <h1>Edit to response Steve's answer</h1>
  
  <p>Thank you for your answer Steve. Still no luck. I try to response according to your response points. </p>
  
  <ol>
  <li>If i don't use optionsValue, rather use getOptionValue and getOptionLevel then query result don't loaded properly. I mean there blank options loaded, no text value. </li>
  <li>yes you are right, is a synchronous method returning a string, i don't need to override this. And this working fine and noOptionsMessage shows properly. Thanks to point this out. </li>
  <li>actionOnSelectedOption is not a noop method, its may have some responsibility to perform. I try to use SearchableSelect as an independent component, if i need some back-end action to do this function will trigger that accordingly. For example, i use this in my project's user-profile, where user can update his school/college information from existing entries. When user select an option there is a profile update responsibility to perform. </li>
  <li>Yes you are right. I don't need to maintain inputValue in state, thanks. </li>
  <li>I do make sure defaultOptions is an array. </li>
  <li>I do test without using debounce, still no luck. i am using debounce to limit the backend call, otherwise there may a backend call for every key-stroke that surely i don't want. </li>
  </ol>
  
  <p>async select work perfectly for 2/3 queries and after that it suddenly stop working. One distinguishable  behaviour i observe that for those cases search indicators ( ... ) also not showing. </p>
  
  <p>Thank you so much for you time. </p>
  
  <h1>Edit 2 to response Steve's answer</h1>
  
  <p>Thank you so much for your response again. I was wrong about getOptionValue and  getOptionLabel. If loadOptions got response both these function called. So i removed my helper optionsValue function from my previous code snippet and update my code-snippet according to ( In this post also ). But still no luck. In some cases async-select didn't work. I try to take a screenshot one such case. I do name use in my local-db name "tamim johnson" but when i search him i didn't get any response but got proper response back from back-end. Here is the screenshot of this case
  <a href="https://i.stack.imgur.com/nBD5C.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nBD5C.png" alt="tamim johnson"></a></p>
  
  <p>I not sure how clear this screenshot is. Tamim johnson also in 6th position in my ranklist. </p>
  
  <p>Thank you sir for your time. I have no clue what i am doing wrong or missing something. </p>
  
  <h1>Edit 3 to response Steve's answer</h1>
  
  <p>This is preview tab response for user search named "tamim johnson". </p>
  
  <p><a href="https://i.stack.imgur.com/2ayWl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2ayWl.png" alt="preview tab"></a></p>