How to optimize performance of chakra-react-select.

[fukaminmin]

I create HTML select box using chakra-react-select.
Currently, I put over 2000 data arrays to chakra-react-select.
Then the chakra-react-select behavior is so heavy.

I am trying to optimize its performance, but I can't.

Please help me about that how to optimize the case using massive data(ex) over 2000 data arrays).

Thank you.

My environmemt:

"react": "^18.1.0",
"next": "12.1.6",
"@chakra-ui/react": "^2.2.1",

[csandman]

Sorry for not responding to this sooner, I was messing around with a couple potential options but never found a perfect solution. At the end of the day you're going to be limited by the fact that rendering that many DOM nodes is not great for performance.

The ideal solution would be to implement some kind of virtualization around the options so that they are only rendered on the page when they're actually in view but i wasn't able to get a minimal working example using react-virtual or react-window or something of that sort, but people have had success making similar wrappers with the core react-select so it would definitely be possible with some extra work.

• https://github.com/guiyep/react-select-virtualized
• https://github.com/bvaughn/react-virtualized-select/
• https://github.com/jacobworrel/react-windowed-select
• https://stackblitz.com/edit/react-select-v2-virtualized?file=index.js

If you have the time or know how to figure out how to replace some of the components in chakra-react-select with custom ones/wrap them it should be possible to do something similar, but its definitely not straightforward.

Here's another list of tips for improving the performance of the base react-select package which could potentially help you.

• https://www.botsplash.com/post/optimize-your-react-select-component-to-smoothly-render-10k-data

One other prop you could consider using is the filterOption function prop:

filterOption

Custom method to filter whether an option should be displayed in the menu

(option, inputValue) => boolean

If you decided to write a custom function for this you could prevent any items from being returned if the length of the search string is less than 3 for example, but you'd have to implement your own function for matching after that point.

---

If I have some time in the future, I'll look into making a virtualized example for chakra-react-select but I can't make any promises that I'll be successful.

[fukaminmin]

Thank you for your reply, csandman :-).
And I was so glad and appreciate your polite answer.

That is sooooo difficult, isn't that?
I understood that it is not easy to resolve.

I'm trying to optimize the performance using your recommended how-to.

Thank you.