score:3

if you look you find that the default value is ignoreaccents: true. this default makes react-select invoke an expensive function called stripdiacritics twice. and this cause performance issues.

include the ignoreaccents: false in react-select.

example: filteroption={createfilter({ ignoreaccents: false })}

score:3

i combined the solution you mentioned (react-window), with the filteroption solution, and the lesser-discussed react-async component. this worked pretty well for me.

react-window will do some sort of 'lazy load', while async react with show a loading sign before showing your search query. these together makes it feel a lot more natural (i have 7000+ options).

this is my first ever response post, so let me know if (anyone) has questions and i'll try my best to answer

import react, { component } from "react";
import asyncselect from "react-select/async";
import { fixedsizelist as list } from "react-window";
import { createfilter } from "react-select";

import "./styles.css";

const testselect = (vendoroptions) => {


const options = [];
for (let i = 0; i < vendoroptions["vendoroptions"].length; i = i + 1) {
  options.push({ value: vendoroptions["vendoroptions"][i], label: `${vendoroptions["vendoroptions"][i]}` });
}

const loadoptions = (inputvalue, callback) => {
    settimeout(() => {
      callback(options);
    }, 1000);
  };


const height = 35;

class menulist extends component {
  render() {
    const { options, children, maxheight, getvalue } = this.props;
    const [value] = getvalue();
    const initialoffset = options.indexof(value) * height;

    return (
      <list
        height={maxheight}
        itemcount={children.length}
        itemsize={height}
        initialscrolloffset={initialoffset}
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </list>
    );
  }
}

const testselectcomponent = () => {
    
    return(
        <div classname ="testdropdown">
          <asyncselect components={{ menulist }} cacheoptions defaultoptions loadoptions={loadoptions} filteroption={createfilter({ ignoreaccents: false })}/>
        </div>
    )
}
    return (
    <testselectcomponent />
    )
}
export default testselect


Related Query

More Query from same tag