title: React AsyncSelect get options from server when inputValue.length > N and user stops typing
body: <p>I am developing a select with input of type text that get the options from API server and display it on the select options. I am using <code>AsyncSelect</code> to achive it but now, I want only to call the API when the <code>inputValue.length &gt;= 6</code> and when the user stops typing.</p>
  <p>This is the code:</p>
  <pre><code>const AppCustomSelect: FC&lt;Props&gt; = ({
    value = {value:&quot;&quot;, label:&quot;&quot;},
    onChange,
  }) =&gt; {
  
      const [selectedValue, setSelectedValue] = useState&lt;MultiValue&lt;ValueLabel&gt;&gt;([value]);
      const [inputValue, setInputValue] = useState&lt;string&gt;(&quot;&quot;);
      const [selectableOptions, setSelectableOptions] = useState&lt;ValueLabel[]&gt;([]);
      
      
        
      const promiseOptions = async (inputValue: string) =&gt; {
          let valueLabelSuppliers: ValueLabel[] = [];
          if(inputValue.length &gt;= 6) {
              const suppliersList = await getSuppliers({country:&quot;&quot;, text: inputValue, status:&quot;&quot;});
              suppliersList.map((supplier) =&gt; {
                  valueLabelSuppliers.push(mapSupplierToValueLabel(supplier))
              });
          }
          setSelectableOptions(valueLabelSuppliers);
          return (valueLabelSuppliers);
      }
  
      const mapSupplierToValueLabel = (supplier: SupplierSelectableListModel): ValueLabel =&gt; {
          return {
              value: supplier.sapCode,
              label: supplier.name
          }
      }
  
      const onInputChange = (option: string, {action}: InputActionMeta ) =&gt; {
          if (action === &quot;input-change&quot;) {
            const optionLength = option.length;
            const inputValueLength = inputValue.length;
  
            const myObject = {
              label: option,
              value: option
            };
      
            const newInputValue =
              (optionLength &lt; inputValueLength)
                ? option
                : inputValue + option[option.length - 1];
              setInputValue(newInputValue);
          }
      };
  
      const onChange2 = (option: MultiValue&lt;ValueLabel&gt;) =&gt; {
        setSelectedValue(option);
        setInputValue(&quot;&quot;);
        onChange(option);
      }
  
      return (
          &lt;AsyncSelect
              isMulti
              inputValue={inputValue}
              onInputChange={onInputChange}
              cacheOptions 
              loadOptions={promiseOptions} 
              onChange={onChange2}
          /&gt;  
      );
  };
  </code></pre>