I have a select component that will need to handle around 7,000 options in it. I am running into two problems. 1) when typing into the search parameter things are loading too slowly. 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. For problem number 1 I have tried to leverage https://github.com/bvaughn/react-select-fast-filter-options 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. 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. Some guidance on this may be helpful. For further context here is the code I have so far: 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) => { } /** * Component Bridge Function * @param stock_id stocks id in the database */ stockSearchChange = (stock_id) => { this.props.onSelectChange(stock_id); } componentWillMount = () => { 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) => { let stringExchanges = exchanges.join(); axios.get( /stock-search-data-by-exchange/ , { params: { exchanges: stringExchanges } }) .then(response => { this.setState({ stocks: response.data }) }) .catch(error => { console.log(error); }) } /** * handles selected option from the stock select * @param selectedOption */ handleSelect = (selectedOption) => { this.stockSearchChange(selectedOption.value); } render() { return ( ) } } export default StockSearch;