title: React Select with very large options lists
body: <p>I have a select component that will need to handle around 7,000 options in it. I am running into two problems.</p>
  
  <p>1) when typing into the search parameter things are loading too slowly.</p>
  
  <p>2) I need to filter though all of the options and disable options that have previously been selected (from values I load from the database) or have just been selected on this page load.</p>
  
  <p>For problem number 1 I have tried to leverage <a href="https://github.com/bvaughn/react-select-fast-filter-options" rel="nofollow noreferrer">https://github.com/bvaughn/react-select-fast-filter-options</a> and it works on first page load. I run into issues whenever I try to modify the options in any way, as you will see I originally try to load in the options via an ajax call (which I can change) or if I need to disable options dynamically I think that may break it.</p>
  
  <p>For problem number 2, when I try to filter though all of these options, it takes a good long time because I am cycling though all 7,000 options each time a person makes a selection in the list.</p>
  
  <p>Some guidance on this may be helpful. For further context here is the code I have so far:</p>
  
  <pre><code>import React, {Component} from 'react'
  import PropTypes from 'prop-types';
  import 'react-select/dist/react-select.css'
  import 'react-virtualized/styles.css'
  import 'react-virtualized-select/styles.css'
  import VirtualizedSelect from 'react-virtualized-select'
  import axios from 'axios';
  
  class StockSearch extends Component {
      static propTypes = {
          exchanges: PropTypes.array.isRequired,
          onSelectChange: PropTypes.func.isRequired,
          searchDisabled: PropTypes.bool.isRequired,
          picks: PropTypes.array.isRequired,
          stock_edit_to_show: PropTypes.number
      }
  
      state = {
          stocks: [],
          selected: []
      }
  
      componentWillReceiveProps = (nextProps) =&gt; {
  
      }
  
      /**
       * Component Bridge Function
       * @param stock_id stocks id in the database
       */
      stockSearchChange = (stock_id) =&gt; {
          this.props.onSelectChange(stock_id);
      }
  
      componentWillMount = () =&gt; {
          this.fetchStocks(this.props.exchanges);
      }
  
      /**
       * Responsible for fetching all of the stocks in the database
       * @param exchanges comma denominated list of exchange ids
       */
      fetchStocks = (exchanges) =&gt; {
          let stringExchanges = exchanges.join();
          axios.get('/stock-search-data-by-exchange/', {
              params: {
                 exchanges: stringExchanges
              }
          })
          .then(response =&gt; {
              this.setState({
                  stocks: response.data
              })
          })
          .catch(error =&gt; {
              console.log(error);
          })
      }
  
      /**
       * handles selected option from the stock select
       * @param selectedOption
       */
      handleSelect = (selectedOption) =&gt; {
          this.stockSearchChange(selectedOption.value);
      }
  
      render() {
          return (
              &lt;div className="stock-search-container"&gt;
                  &lt;VirtualizedSelect
                      name="stock-search"
                      options={this.state.stocks}
                      placeholder="Type or select a stock here..."
                      onChange={this.handleSelect}
                      disabled={this.props.searchDisabled}
                      value={this.props.stock_edit_to_show}
                  /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default StockSearch;
  </code></pre>