CODEWITHSUNDEEP
javascriptreactjslarge-datareact-select
David Jarrin
David Jarrin

Reputation: 1749

React Select with very large options lists

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 (
            <div className="stock-search-container">
                <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}
                />
            </div>
        )
    }
}

export default StockSearch;

Upvotes: 3

Views: 13399

Answers (1)

SteveM
SteveM

Reputation: 11

For problem #1, react-windowed-select has been very useful for me in a similar circumstance: https://github.com/jacobworrel/react-windowed-select

For problem #2, I have found that react-windowed-select redraws extremely quickly. You can experiment with filters with your dataset, here is a code snippet to get you started:

const startTime = Date.now()

// Create a 7000 element array with a bunch of content, in this case junk strings
array = [...Array(7000)].map(i => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5))
const arrayBuiltTime = Date.now()

// Filter out any string with the letter 'q' to emulate a filtering operation
const filteredArray = array.filter(i => !i.includes('q') )
const doneTime = Date.now()

// See how long it takes :-)
console.log(startTime)
console.log(arrayBuiltTime)
console.log(doneTime)

https://codepen.io/smeckman/pen/zYOrjJa?editors=1111

Upvotes: 0

Related Questions