0

I'm facing a performance issue while using React Select, react-window, and the country-state-city library. Specifically, I'm encountering slow loading times when working with the city options, whereas the state options load fine, i have already implemented react-window for optimizing performance, which worked well for the state options as they have around 5000 entries, however the city options consist of approximately 140000 entries causing slow loading and opening times.

   <CreatableSelect
  options={citiesOptions.map((city, i) => ({
    id: i, value: city.isoCode, label: city.name
  }))}
  onChange={(value) => handleOtherCity('CityOptions', value)}
  components={{ MenuList }}
  value={otherCity}
  placeholder={<div className="text-gray-400">City</div>}
  styles={customStyle}
  isClearable
  isMulti
  className="my-react-select-container text-sm"
  classNamePrefix="my-react-select"
/>

import { FixedSizeList as List } from "react-window";


  function MenuList(props) {
    const height = 35;
    const { options, children, maxHeight, getValue } = props;
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * height;
    

    return (
        <List
        height={maxHeight}
        itemCount={children.length}
        itemSize={height}
        initialScrollOffset={initialOffset}
        className="scrollbar"
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </List>
    )
  }
  
  export default MenuList
Moufid sgh
  • 33
  • 6
  • 1
    If `citiesOptions` contains 140k elements, `citiesOptions.map(...)` is definitely very costly, i would recommend using `useMemo` like so `const options = useMemo(() => citiesOptions.map((city, i) => ({ id: i, value: city.isoCode, label: city.name })), [citiesOptions])` so the options are not recompute at each render. Another better options would to simply not compute all options but use a select with a search feature and only show options that matched the search query. You can implement local search with library fuze.js – shantr Jun 26 '23 at 20:55

0 Answers0