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
Source: stackoverflow.com
Related Query
- Efficiently rendering large list of data in React Select
- React list rendering wrong data after deleting item
- React js rendering a large list of nested elements
- Issue loading data from array into a select list in react
- React performance: rendering big list with PureRenderMixin
- React non-blocking rendering of big chunks of data
- Most efficient way of rendering JSX elements when iterating on array of data in React
- React - What's the best practice to refresh a list of data after adding a new element there?
- React Select - How to show / iterate through data from api call in option instead of hardcoding options?
- Rendering React components from json data dynamically
- React JS - How do I bind json data to a dropdown list
- React Grommet Select - passing in object data as options
- Fetching large amount of data with loop or recursion with progress percentage in React / React native
- React Hooks: how to wait for the data to be fetched before rendering
- How to fix lag on select element containing a large list of options
- List elements not rendering in React
- best place to fetch data before rendering in react
- Efficiently rendering a large number of Redux Form Fields?
- React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering
- How to fetch data in react server side rendering based on dynamic routing path
- React renders the wrong data when deleting the item in the middle of the list
- How to get a data after react select using axios and ReactJS?
- React Typescript Conversion issue rendering data
- Rendering List with Fetch in React
- how to display large list of data using reactJS as frontend and django rest framework as backend
- Rendering Firebase list on React
- Strategies for rendering relational data in react (stored in redux)
- How to do Server Side Rendering in React With React Loadable and Fetching Data for Components (Like Next.js)?
- React Router v6 and recursive rendering of Route component from data
- React - how to populate one select menu based on a value of another select menu using data from a local .json file
More Query from same tag
- when button is clicked, Form is redirected to another page But Data is not updating
- why my react code not working?
- How to write type annotation for higher-order component?
- How to Use URL Parameters and Query Strings With React Router
- Next.js Create-next-app does not download the next template
- Passing an array of objects to child component rendered within iteration returns undefined error in React
- React useRef : Null (Cannot read property 'children' of null)
- useState variable not setting on the first run of the snippet of code
- Using OOP in react js
- i can't create a line vertically with react annotation
- Use ref in Higher Order Components
- Failed to load resource: net::ERR_CONNECTION_REFUSED http://127.0.0.1:3000/api/categories
- Flux + React.js Login/register flow
- Ensure a certain line of code is evaluated early enough
- Why is my state counter one value behind what it should be?
- Is it possible declaring a variable inside the class and outside the method
- useState returns initial value and not updated value
- how to show options on hover in react bootstrap
- Scroll programmatically to last column in table
- React rendering the component twice and 2nd disappears after a flash, [DOM] found 2 elements with non-unique id
- Do I Use PropTypes if Using Context API
- How to prevent autofilll in Ract antd?
- Unable to get env variables in public/index.html for react app
- React Hooks: setState hook inside map function
- How to make rating stars in react js?
- How to catch a snapshot (reponse) and render it?
- Error: undefined is not an object (evaluating 'this.props.menuOptions.map')
- Flow error Cannot get `x` because property `y` is missing in `Array` [1]
- How to add and delete an object item in react state?
- Filling redux state with key objects from API endpoint