CODEWITHSUNDEEP
javascriptreactjs
Switzz
Switzz

Reputation: 69

React - Select very slow for loads of data from API

I have a react-select widget for items to be searched with. Currently, i return a list of 15,000 items into the react-select for users to search within. Unfortunately, the react-select becomes extremely slow and lags when user starts to type or scroll through the select.

I tried using localStorage however, the issue still persist

Is this a bug with the react-select widget or there is any advanced way of handling this issue please?

PS: Beginner with react

Component

 state = {
         productData:[],
         searchable:true
      };

    fetchAll(){
            return this.fetchPost().then(([response,json]) => {
               console.log(response);
               if(response.status === 200)
               {
                  this.setState({
                     itemData: json.data.items
                  })         
               }
            })
         }               
         fetchPost(){
            const URL = 'http://domain/api/';
            return fetch(URL, {method:'GET',headers:new Headers ({
               'Accept': 'application/json',
               'Content-Type': 'application/json',
                  })})
            .then(response => Promise.all([response, response.json()]));
         }



          render(
          let options = this.state.productData.map(function (product)
          {
          return {value: product.name, label: product.name};
          })
              return{ 
                <Select style={select}
                                  value = {this.state.value}
                                  onChange = {this.handleChange}
                                  clearable = {this.state.clearable}
                                  searchable = {this.state.searchable}
                                  labelKey = 'name'
                                  valueKey = 'name'
                                  options={options}
                                />  

    })

Upvotes: 1

Views: 6208

Answers (1)

Raj Saraogi
Raj Saraogi

Reputation: 1938

With react virtualized and pagination you can handle such amount of data in scrolling inside select.

But still how can you perform inline search from that data as after pagination only certain amount of data will be available for search and now search will be performed in that only so what about the data which haven't been loaded yet .

And do you think with so much data your user will like to scroll. This is a very bad experience.

So the preferable way will be using Async React Select which allows user to search the data by calling api, i.e no more internal search.

Async select is designed perfectly for such use cases which allows to load data in select using pagination and also allow search outside the data loaded.

Upvotes: 1

Related Questions