Material-ui: Lists Render Extremely Slow (Unbearable beyond 100 items on desktop)

[jdinard]

Lists render extremely slowly a simple render of 100 list items (each with a checkbox) takes over 1000ms to render on my desktop. Even when removing the checkboxes, I get similar performance.

On my phone (Galaxy S5) it takes nearly 1000ms to render 10 items.

Presently this makes lists unusable in many use-cases. The same list, rendered with just html and css markup, takes less than 100ms to render.

Tested in up to date version of Chrome, and Android 4.4

[ajchambeaud]

I'm having the same issue with performance in lists.

[oliviertassinari]

I suggest you to use https://github.com/orgsync/react-list

[nightlyop]

I'm using material-ui and I need a list so I'd really prefer using the material-ui list and not yet another library..

+1 for fixing this performance issue.

[t1mmen]

I'm running into this performance issue too. I'm working around it using an infinite scroll component like @oliviertassinari suggested, but a real fix would be a huge help.

[oliviertassinari]

@t1mmen Using react-list is not a "hack" if you need to render a significant amount of ListItem. How many ListItem are you rendering?

[t1mmen]

@oliviertassinari I've been noticing decreased performance using ListItem's starting around 10 items (on desktop). Once I get closer to 50 it's pretty painful, particularly in dev/debug mode (production is better, but still very noticeable)

Typically, around 30 ListItems are visible on screen at the same time, so there isn't a lot of room to optimize. react-list did make a world of difference when I tested with 300 ListItem's though.

[oliviertassinari]

I've been noticing decreased performance using ListItem's starting around 10 items (on desktop)

You are confirming what @alltom was saying. We need to do something.

[t1mmen]

Thank you, appreciate it! As I'll be using more of material-ui in the coming weeks, I'll try to contribute more concrete reports & code in the future. Thanks again for your efforts!

[jgoux]

I encounter the same issue with more than 10 ListItem with checkboxes (using LeftCheckbox). All the items are rerendered when I check/uncheck a checkbox in the list. The expected behaviour would be that only the item checked rerender I think.

[zuhair-naqvi]

+1 this is becoming a major issue! Any headway on a solution?

[dpacmittal]

Lists are terribly slow on cordova on Android as well. I have 25 items on my list and its painfully slow even to scroll the list.

[jamesbillinger]

I only seem to have issues with list performance if using nested items. For me, replacing the parent/container listitem with a card with collapsible cardtext improved performance tremendously. Maybe that will help someone.

[ykshev]

+1. Small list(~10 items) with checkboxes is really slow.

[nathanmarks]

Closing in favour of #3289