I hope this is the correct place to ask my question. I got a serious performance problem with React and it’s related to React concepts, so I think having a forum thread is better suited than StackOverflow.
My React web app has a list component which consists of 300 item components. There’s always one selected item and the selection can be changed by using the arrow buttons. So the state of the list consists of an array of data for items and the index of the selected item. Because the arrow buttons change the selection state, React rerenders the list whenever the selection changed. I implemented
shouldComponentUpdate for the ListItem component and whenever the selection changes, that method is called for all 300 ListItems. My method implementation does two simple comparisons but because React has to call that method 300 times, the app becomes really slow. It takes about 200-300ms to update the selection, which feels really slow when I keep pressing the down button.
All ListItems also have a
key property that’s set correctly.
So my first question would be if this makes sense so far? I’ve did a lot of testing the last hours and by now I’m pretty to sure that this is the performance bottleneck. However it still seems weird because the rerendering doesn’t really take longer if I don’t implement
shouldComponentUpdate and let React decide if it should rerender the instance to the DOM. But maybe this is just because the ListItem component is pretty small, I also logged that my
shouldComponentUpdate works correctly.
This performance issue feels really stupid to me because I always know which two ListItems would need to be rerendered (the one that lost selection, the one that got selection, the other 298 items will stay the same).
I found this SO question where someone had a very similar problem but the accepted answer uses undocumented ImmutableJS methods and the GitHub issue related to that is still open.
Do you guys know any good ways to solve this? I really like React but this is a pretty big problem for me.