slow loading with country-state-city and react-window

111 Views Asked by At

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

0

There are 0 best solutions below