Electron with React - rendering large list of items causes high CPU usage

Viewed 183

I have an electron app with React and I need to display a list that contains a relatively large amount of items (~400), when I render it "as is" the scrolling becomes very laggy and the CPU usage increases to about 50%, it happens consistently.

"as is": {items.map(item => <Item item={item}/>)}

I have confirmed that when less than 50 items are displayed the problem doesn't occur.

seems using react-virtualized or react-window isn't possible because the items have varying heights (per item) and are also expandable.

Is there any solution other than those libraries that can help without having to use pagination (since the UX doesn't fit well to pagination)?

0 Answers
Related