Semantic-ui-react: Dropdown: Consider avoid force recalculation styles

[a-x-]

// Excuse my beginner's English

Look at this code please:
https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L953

Forced reflow is a likely performance bottleneck.

In this lines of code, DOM is reading and writing immediately.

Would be cool, if dom reading will be removed in favor of calculations on variables. Maybe DOM reading could be async (via requestAnimationFrame).

[a-x-]

My case — 2000 items in the Dropdown — that's not too much.

[levithomason]

Thanks for spotting this. I have not invested in any performance improvements, yet. Any work in this area would be very much appreciated.

PRs with before/after benchmarks are welcome.

[qoalu]

Wanted to open a new issue, but this actually fits into the issue I am having with autoSized TextAreas

I am getting 3 rerenders for a TextArea here. For now replaced with another plugin which does not cause this to happen.

Here is a useful overview of Javascript that causes layout to happen from Paul Irish
https://gist.github.com/paulirish/5d52fb081b3570c81e3a

It's probably one of those. For TextArea this seems to be getComputedStyle in the updateHeight Method:

let { borderTopWidth, borderBottomWidth } = window.getComputedStyle(this.ref)
borderTopWidth = parseInt(borderTopWidth, 10)
borderBottomWidth = parseInt(borderBottomWidth, 10)

this.ref.rows = '1'
this.ref.style.minHeight = '0'
this.ref.style.resize = 'none'
this.ref.style.height = 'auto'
this.ref.style.height = (this.ref.scrollHeight + borderTopWidth + borderBottomWidth) + 'px'

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[glee23]

I'm not well versed enough in react to be able to implement a fix, but this performance issue prevents me from being able to use this library for my project :(

[levithomason]

We should investigate implementing react-virtualized for the Dropdown list. This could resolve perf issues with large lists.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[ibolton336]

Having an issue with this also. 1500 values in a dropdown may be my problem.

[anjapadu]

I will give it a try on my free time mr bot :)

[Shenrak]

Hi guys,

Just wanted to let you know that i have the same performance issue with ~800 values
Something like 800ms delay when opening and same when choosing a value.

[levithomason]

Hey folks, please use the reaction button on the main thread to show support. This makes issues sortable by most reactions and helps assess their potential impact. Comments confirming the issue ping a lot of people and get lost in the noise.

This issue has been labeled optimization and help wanted meaning it is valid, we are aware many people are experiencing the problem, and we'd love a PR. With ❤️ , thank you!

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale[bot]]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!

[nikc3work]

I am also having performance issue for 1000+ values. There is lot of lags while inputting text in search.

[RonenMars]

Having a performance issue for 1800 values. Awful lags on dropdown open, select and even close.