React - Select slow execution
Возникает сложность с компонентом React-Select, заполняю options из API,
при большом количестве опций при открытие сталкиваюсь с слишком сильными фризами, падает фпс и пролистать опции либо отфильтровать практически не возможно,
Просьба, подсказать, возможно ли как то исправить это?
app.jsx
<Country
dropOptions='country'
/>
Country.jsx
import React, { Component } from 'react';
import axios from 'axios';
import Select from "react-select";
export default class Country extends Component{
constructor(props){
super(props)
this.dropOptions = props.dropOptions
this.state = {
country: '',
selectedOption: []
}
console.log(this.dropOptions)
}
async getOptions() {
const response = await axios.get(`/flask-dash/options/${this.dropOptions}`)
const data = response.data
const options = data.map(d => ({
'value': d.id,
'label': d.id
}));
this.setState({selectedOption: options})
}
handleChange(e){
this.setState({id: e.value, country: e.label})
}
componentDidMount(){
this.getOptions()
}
render(){
return(
<div>
<Select
options={this.state.selectedOption}
onChange={this.handleChange.bind(this)}
isMulti
placeholder='Select country'
/>
</div>
)
}
}